Locating text in the exact middle of a page *Resolved*

**netlias** · Jan 19th, 2003, 07:54 PM

Hello-

I am trying put content in the exact middle of a page....I am using CSS, and I have figured out how to center things horizontaly, but I have no idea how to center them vertically....I was thinking that I could do this if I knew how find the height of a browser window, but I don't how to do that either. Does anyone have any ideas?

Thanks.

**punkpie_uk** · Jan 20th, 2003, 05:48 AM

I know it's incorrect, but I usually create a table and set height/width to 100%. Then you can use vertical align and text-align to set the position.

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Centered Text</title>
    <style type="text/css">
    <!--
      table {border:0px; width:100%; height:100%;}
      td {text-align:center; vertical-align:middle;}
    -->
    </style>

  </head>
  <body>
    <table cellpadding="0" cellspacing="0">
       <tr>
         <td>Centered Text</td>
       </tr>
     </table>
  </body>
</html>

**Rick Bull** · Jan 20th, 2003, 06:38 AM

If you're going to do that you could really just use a DIV or other block element with it's height set to 100% couldn't you? Don't know if it's a bit buggy withs DIV or something, you'll have to try.

The other thing you could if you don't want to use vertical-align is use absolute positioning:

Code:

<div style="position: absolute; top: 50%;">Blah</div>

If you want it to still be relative to the page, just encase it in another relatively positioned div:

Code:

<div style="position: relative;">
  <div style="position: absolute; top: 50%;">Blah</div>
</div>

Don't know how well that works either

**netlias** · Jan 26th, 2003, 10:22 PM

Thanks for your help

Thread: Locating text in the exact middle of a page Resolved

Thread Tools

Display