Tuesday, August 12, 2014

Vertically Centered Content in HTML Div

<div class="outer">
  <div class="inner">
    Content
  </div>
</div>

.outer
{
height: 12em;
position: relative;
}

.inner
{
position: absolute;
height: 6em;
margin-top: -3em;
top: 50%;
}

As simple as sample:

  • Outer div with relative position and specific height (optional if it is inhereted from its parent)
  • inner div styles by specific height (like half of parent), absolute position, 50% top and negative half height top margin.