Centering a div on the screen
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, top right corner, bottom left, and bottom right. You can click the following link to preview this CSS in action:
Click here to preview center screen div
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 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. I am always glad to answer questions and work on custom scripts.