Centre DIV Horizontally and Vertically using CSS

Here’s a quick guide on how to centre a DIV, both vertically and horizontally, in your web browser window. The main thing to remember is give your container div an absolute position and then the content div within a relative position.

Here’s what it looks like:

I always find it’s easier to download a page and play around with it in your own leisure so click here to download single html file containing HTML and CSS of the Centered DIV.

Here’s the code for those that don’t want to download:

CSS:

#container
{
position: absolute;
top: 50%;
left: 50%;
border: 3px solid black;
width: 400px;
height: 300px;
margin-left: -200px;
margin-top: -150px;
}

#content
{
font-size: 0.8em;
font-family: sans-serif;
background-color: #ccc;
position: relative;
left: 50%;
top: 50%;
width: 240px;
height: 50px;
margin-left: -120px;
margin-top: -25px;
}

HTML:

<div id="container">
<div id="content">
This content div is centered within it's containing div
</div>
</div>