Vertically & Horizontally Aligned Layout in CSS

MB did some great research on vertical and horizontal alignment using CSS. Handy stuff!

<style>

* {margin:0; padding:0;}
/* What makes this layout work is the use of two divs: one to handle the vertical alignment and the other for horizontal (note that I've named the divs appropriately so you can see how each is set up). It boils down to having a relatively positioned div within a absolutely positioned one. */
#vertical {
position: absolute;
top:50%; /* Pretty self explanatory, this puts the top of the div halfway down the page. */
left:0; /* This coupled with the width:100% value below makes sure this div fills the whole browser window horizontally.
*/
margin-top:-150px; /* Because you position items based on the top of the object (instead its center point), you need a
negative margin to bring the content back up to more accurately center it. This value can be adjusted based on your
content, but realistically it should be around half of your overall height. For example, if your content is 400px high,
this margin would be -200px. */
width:100%;
min-width:600px; /* Keep this value the same width as your content. */
}
#horizontal {
position:relative;
margin: auto; /* Using this value will horizontally center align your div, but only if it has a defined width (which we list next). */
width: 600px;
}
</style>
.
.
.
<div id="vertical">
<div id="horizontal">
Content
</div>
</div>