Absolute centering (horizontal and vertical)

[seany123]

im wanting to center vertically and horizontally.. this is the code i have so far! its not far away...

 

CSS:

body {
    background-color: #E1DDD9;
    color: #564B47;
    font-family: Verdana,Arial,Helvetica,SunSans-Regular,Sans-Serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
    width: 100%;
}

#centeredcontent {
    left: 50%;
    margin: -100px 0 0 -200px;
    position: absolute;
    top: 50%;
}

[Frank P]

Close, really close...

 

Just add this:

#centeredcontent {
    width: 400px;
    height: 200px;
    background: yellow;
}

[seany123]

that has centered it, however what if i wanted #centeredcontent to be larger than 400px in width?

[Frank P]

That's no problem. As long as the left margin is minus half the width.

 

The trick is that with position: absolute plus left:50% the element is put at the right-hand side of the middle of the screen. To get it centered, move it back to the left with margin-left:-(half the element's width).

[seany123]

Okay 1 last question. what do i do if the width is 513px, 256.5px or what?

[Frank P]

No, because that will not be rendered at all, and you will end up with a margin of 0, with all due consequences. Just accept one pixel off perfect centering. Nobody will notice, as long as there is a perfect vertical alignment. 

[seany123]

I changed it to 256.5px and its seemed to have centered it perfectly.

[Frank P]

I changed it to 256.5px and its seemed to have centered it perfectly.

 

Risky business. Half pixels are not valid values. You're running the risk that some browsers don't render it at all, despite the fact that there are also browsers that forgive the error by ignoring the .5.