Center DIV Vertically and Horizontally – Lab Core

This is how you would center an item vertically and horizontally on your webpage.

Your HTML should look like this:

<br /> <body></p> <div id="mycontainer"> <div id="mycontent"> Centered div </div> </div> <p></body><br />

Your CSS should look like this

#mycontainer{
position: absolute;
top: 50%;
margin-top: -325px;/* half of #mycontent height*/
left: 0;
width: 100%;
}
#mycontent {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 600px;
}