Vertically Align Anything

Vertically align anything, even if you don't know the parent's height. This solution is my variation of Sebastian Ekström's vertical alignment solution (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/). The CSS property display:flex; on the grandparent forces the parent to have a height, thereby alleviating the need to explicitly declare a height on the parent itself. This also solves the need to absolutely position anything, causing elements to be removed from the normal flow.

by Scott Currell

HTML

<div class="grandparent">
  <div class="parent">
    <div class="child">I'm a child div</div>
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ipsum ex, eleifend vel metus id, mattis consectetur quam.</div>
    <div class="child">
      <ul>
        <li>Nested list item 1</li>
        <li>Nested list item 2</li>
        <li>Nested list item 3</li>
      </ul>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.grandparent {
  /* Center Styles */
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* Contrast Styles */
  background-color: #999999;
  padding: 10px;
}
.parent {
  /* Center Styles */
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  /* Contrast Styles */
  background-color: #DEDEDE;
  padding: 10px;
  min-height: 100%;
}
.child {
  /* Center Styles */
  position: relative;
  float: left;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  /* Contrast Styles */
  background-color: #666666;
  color: #FFFFFF;
  padding: 10px;
  width: 200px;
}
.child:not(:first-of-type) {
  /* Contrast Styles */
  margin-left: 10px;
}