carlos-sanchez
11/25/2013 - 1:04 AM

Absolute Center with Inline Block. The content block’s width must be declared to be no wider than 100% of the container minus 0.25em if the

Absolute Center with Inline Block. The content block’s width must be declared to be no wider than 100% of the container minus 0.25em if the content is wider than the container. like a block with long paragraph text. Otherwise, the content block will be pushed to the top, which is the reason for using :after. Using :before caused the content to be pushed down 100%!

If your content block needs take up as much available horizontal space as possible, you can add either max-width: 99%;, which works for bigger containers, or max-width: calc(100% - 0.25em) depending on the browsers you support and the width of the container.

The benefits are mostly the same as the Table-Cell technique, but I initially left this method out because it’s very much a hack. Regardless, browser support is great and it proves to be a popular technique.

absolute-center-inline-block.html
content_copyfile_download
<div class="Center-Container is-Inline">
  <div class="Center-Block">
    <!-- CONTENT -->
  </div>
</div>
absolute-center-inline-block.css
content_copyfile_download
.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+ */ 
}