Question

I’m trying to center a div on the document, and it works horizontally, but not vertically:

width: 950px;
height: 630px;
background: #FFFFFF;
margin: auto;

Shouldn’t margin: auto place it in the center of whatever it’s in (the page itself, in this case)? I used to have a workaround for this, but I can’t get it to work. It would also be nice to know what I’m doing wrong, so I can stop doing it.

Answer 1

margin: auto does not align elements vertically.

If you have to support older browsers, you’ll have to define a fixed height for your div:

div {
    position: relative;
    top: 50%;
    width: 750px;
    height: 500px; /* sample. adjust as needed */
    margin: -250px auto 0; /* half the height */
}

Here’s the fiddle: http://jsfiddle.net/2qmVX/

---

If you don’t care about IE8 and below, this’ll allow you to retain your fluid height:

div {
    position: relative;
    top: 50%;
    margin: auto;
    transform: translateY(-50%);
    /* add prefixed versions... */
}

Here’s the fiddle: http://jsfiddle.net/VMaVM/ (remember: modern browsers only).

---

Update: As pointed out by @FabrícioMatté, you also have to apply 100% height to the html & body elements:

html, body {
    height: 100%;
}

See the demos above.