How to Keep My Web Pages in the Center of the Screen

By Craig Witt

HTML code vertically aligns web page elements to the top of the browser window by default. This arrangement works well for most pages and applications, where the content extends from the top of the page and down below the bottom of the browser window. However, some sites offer much shorter blocks of content that lend themselves well to vertical centering. Achieving this look requires the addition of just six lines of HTML.

Step 1

Open your web page and view its HTML. If you edit your pages in a text editor, such as WordPad or Notepad, simply open your page in the editor. If you use a visual editing program instead, like Adobe Dreamweaver or Microsoft FrontPage, open your page and change the display method to "Code View." This shows you the HTML code that controls the look, feel and content of your page.

Step 2

Add three table-related HTML tags. The simplest way to vertically center a page is to wrap all of the content on the page in an unformatted table, then apply vertical centering to the primary table cell. To add the opening table tags, locate the

tag near the beginning of your page code and insert a blank line directly below it. Copy and paste the code below onto this blank line:

Step 3

Add three additional table-related HTML tags. Locate the

tag near the end of your page code and insert a blank line directly above it. Copy and paste the code below onto the blank line:

Step 4

Save your web page and open it in your browser. Whether the browser window is tall or short, your content is now vertically centered on the screen.