absolute centred layout
I’ve created a small example page which demonstrates a method for creating a vertically and horizontally centred box. I decide to put this up after seeing a post over at sniplr.
Here’s the example: centred css layout
This example is elastic so it scales to the font size. For simplicity, I’ve not added any hacks for Ie box model issues.
The key code
html,body {
min-height: 100%; /*this makes sure that the page canvas fills the browser*/
background: #efefef;
}
div#popmsg {
position: absolute; /*sets the positioning type*/
width: 18em; /*width in ems - keeps things elastic*/
height: 6em; /* same for the height */
left: 50%; top: 50%; /* this line and the next line sets the top left corner of the box to the exact centre of the page */
margin-top: -4em; /*then use negative margins top and left to offset the box by half it’s width*/
margin-left: -10em;
border: 1px solid #999999;
background: #FFFFFF;
padding: 1em;
}