Centering in CSS: A Complete Guide

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.

So let's make it a decision tree and hopefully make it easier.


Absolute Center (Vertical & Horizontal) an Image

CSS background-image Technique:

html { 
   background:url(logo.png) center center no-repeat;

CSS + Inline Image Technique:

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */

Table technique:

html, body, #wrapper {
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
#wrapper td {
   vertical-align: middle;
   text-align: center;
<table id="wrapper">
    <td><img src="logo.png" alt="" /></td>