Vertical & Horizontal Center with CSS


Web Devs have been promised that vertical centering an element within the browser view port will be a part of CSS3. Until we see adoption by the browsers getting that perfectly centered element is still a pain.

Well, here's a little bit of code I use, I've tested it in FF, IE7 and Safari 4, on Windows. I'd appreciate your testing if you have a browser/OS combo not listed here.

So, the CSS is:

<style type="text/css">

html,body { margin:0; }

.position { width:100%; height:0; position:absolute; top:50%; overflow:visible;}

.content { width:20em; height:16em; display:block; margin: -8em auto 0 auto; text-align:left; border:4px solid #999; padding:1em; }


And the html:

<div class="position">

<div class="content">

<p><img src="success.png" /> Thank you!</p>

<p>Your data, <strong>$data[name]</strong>, has been created.</p>



Notice we are only using two classes here. First with .position we make sure to absolutely position 50% from the top of the view port. We can set the height to 0 and overflow to visible.

Next, the .content, which will directly contain our centered content, is horizontally centered using margin-left and margin-right auto. We set the desired hight and width and then set margin-top to roughly 50% of the height. This pulls the vertical placement up above the .position layer, thus centering the block vertically.

Give it a try; let me know what you think.