Absolute Horizontal And Vertical Centering In CSS

Explanation

After researching specs and documentation, this is my understanding of how Absolute Centering works:

1. In the normal content flow, margin: auto; equals ‘0’ for the top and bottom. W3.org: If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.
2. position: absolute; breaks the block out of the typical content flow, rendering the rest of the content as if that block weren’t there. Developer.mozilla.org: …an element that is positioned absolutely is taken out of the flow and thus takes up no space
3. Setting top: 0; left: 0; bottom: 0; right: 0; gives the browser a new bounding box for the block. At this point the block will fill all available space in its offset parent, which is the body or position: relative; container. Developer.mozilla.org: For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).
4. Giving the block a width or a height prevents the block from taking up all available space and forces the browser to calculate margin: auto based on the new bounding box. Developer.mozilla.org: The margin of the [absolutely positioned] element is then positioned inside these offsets.
5. Since the block is absolutely positioned and therefore out of the normal flow, the browser gives equal values to margin-top and margin-bottom centering the element in the bounds set earlier. W3.org: If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values. AKA: center the block vertically

TL;DR: Absolutely positioned elements aren’t rendered in the normal flow, so margin: auto; centers vertically within the bounds set by top: 0; left: 0; bottom: 0; right: 0;.

Responsive

.Absolute-Center.is-Responsive {
  width: 60%;
  height: 60%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

Go ahead, add padding to the element; Absolute Centering doesn’t mind!

Overflow

.Absolute-Center.is-Overflow {
  overflow: auto;
}

Resizing

.Absolute-Center.is-Resizable {
  min-width: 20%;
  max-width: 80%;
  min-height: 20%;
  max-height: 80%;
  resize: both;
  overflow: auto;
}

Absolute Centering keeps the block centered no matter how the block is resized. Setting min-/max- will limit the block’s size to what you want and prevent it from overflowing the window/container.

If you don’t use resize: both, you can add a transition to smoothly animate between sizes. Be sure to set overflow: auto since the block could be resized smaller than the content.

Absolute Centering is the only vertical centering technique tested that successfully supports the resize: both property.

Images

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

.Absolute-Center.is-Image {
  height: auto;
}

.Absolute-Center.is-Image img {
  width: 100%;
  height: auto;
}

Note that height: auto; works for images, but causes a regular content block to stretch to fill the container unless you use the variable height technique. It’s likely that because browsers have to calculate the height for the image rendered image, so margin: auto; ends up working as if you’d declared the height in all tested browsers.

Variable Height

/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
  Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
});

.absolutecentercontent .Absolute-Center.is-Variable {
  display: table;
  height: auto;
}

One way around the declared height is adding display: table, centering the content block regardless of content length. This causes issues in a few browsers (IE and Firefox, mainly), so my buddy Kalley at ELL Creative wrote a Modernizr test to check if the browser supports this method of centering. Now you can progressively enhance

Other Techniques

.is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}

.is-Transformed {
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    <!-- CONTENT -->
    </div>
  </div>
</div>

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

<div class="Center-Container is-Inline">
  <div class="Center-Block">
    <!-- CONTENT -->
  </div>
</div>

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}

.Center-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

Recommendations

Each technique has their advantages. Which one you choose mainly boils down to which browsers you support and what your existing markup looks like, but use the comparison table to make the right choice to match the features you need.

Absolute Centering works great as a simple drop-in solution with no-fuss. Anywhere you used Negative Margins before, use Absolute Centering instead. You won’t have to deal with pesky math for the margins or extra markup, and you can size your boxes responsively.

If your site requires variable height content with the best browser compatibility, try out the Table-Cell, Inline-Block techniques. If you’re on the bleeding edge, give Flexbox a try and reap the benefits of its advanced layout techniques.