CSS Center Screen DIV
   
All you need to center a div is some CSS. You may also want to check out my
other articles on div positioning: full screen (URL: css-full-screen-div.html),
top right corner (URL: css-top-right-corner-div.html), bottom left (URL:
css-bottom-left-corner-div.html), and bottom right (URL:
css-bottom-right-corner-div.html). You can click the following link to preview
this CSS in action:
   
Click here to preview center screen div (URL: position-div-center-screen.html)
   
The CSS
   
Put this code inside the head tag:

<style type="text/css">
  /*this is what we want the div to look like
    when it IS showing*/
  div.centered{
    display:block;

    /*set the div in the center of the screen*/
    position:absolute;
    top:50%;
    left:35%;
    width:350px;
  }

</style>

   
This CSS positions the div at the very center of the screen.
   
Now, just grab the XHTML (URL: #html) for the actual div.
   
The HTML
   
Place this code inside the body tag:

<div class="centered">
  <p>Here is my div content!!</p>

</div>

   
CSS Walkthrough
   
Let's do a walk-through of this easy CSS.

position:absolute;
 

   
This line makes it so that we can put the div anywhere on the page that we want.
It can be 200 pixels from the left, 20 from the top, whatever! It is not
affected by the other HTML elements around it.

top:50%;
 

   
This line says to put the loading div 50% down the page--so, halfway down. In
other words, 50% of the height of the page should be between the top of the page
and the top of the div.

left:35%;
 


   
So, it would follow that maybe we should set left:50% as well. However, we do
not. If we did this, the div would be a bit off-center, since the left edge of
the div would be halfway across the screen. Instead, we estimate that the left
edge should be about 35% of the way across the screen. This should be less if
the div is bigger.
   
More Questions?
   
As always, if you have any more questions, please email me (URL: contact.html).
I am always glad to answer questions and work on custom scripts.