How to Center HTML in CSS

Published by on April 29, 2010

I was putting together a landing page for an affiliate offer (you can see it here) and was trying to get the element centered in the middle of the page in pure CSS. I found this little guide, it took me less than 30 seconds to setup, and now my affiliate landing page looks perfect.

Center Elements in Pure CSS

css-centering.png

The code below puts a grey box around everything, so if you don’t want that, just remove:

border:1px dashed #333;
background-color:#eee;

Hope this helps some of you out there design your affiliate landing pages.

[css]
body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
[/css]