Vertical Centering with FlexBox

Pretty simple, really.

by Brenton Strine

HTML

<div class="Aligner">
  <div class="Aligner-item">wow.</div>
  <div class="Aligner-item">Hi<br>There<br>CSS<br>and<br>HTML</div>
  <div class="Aligner-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat tellus ut suscipit sagittis. Quisque vehicula dolor purus, ac interdum nisi congue eget. Ut a lectus bibendum, egestas ipsum quis, gravida sapien. Fusce dapibus justo lectus, quis lacinia orci faucibus sit amet. Integer tempor urna id arcu condimentum feugiat at a nisl. Ut quis elit ipsum. Donec sit amet suscipit tortor, sit amet sodales dolor. Duis sodales sodales lectus a interdum. Mauris volutpat justo quis lectus sollicitudin porta. Cras sagittis mattis massa vitae condimentum. Cras eget eros id felis auctor finibus. Aenean hendrerit, mauris id ullamcorper fermentum, justo nunc mollis arcu, ut posuere libero metus at lectus.</div>
</div>

CSS

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}
div { padding: 5px; border: solid 1px #666;}