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:

Center DIV in browser window

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:


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

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;


<div id=”container”>
<div id=”content”>
This content div is centered within it’s containing div

  • Jonno

    Dude, your title is wrong (and redundant – when talking about web dev it’s assumed we’re talking about it being in a browser 🙂

    Centering a div is just:

    #container {
    margin:0 auto;

    What you are describing is both horizontal AND vertical centering.

  • Thanks Jonno – I’ve changed the title accordingly.