flexbox centering

index.html

<div class="aligner">
  <div class="aligner-item Aligner-item--top">…</div>
  <div class="aligner-item">…</div>
  <div class="aligner-item Aligner-item--bottom">…</div>
</div>

oypxbv.markdown

oYpXbV

A Pen by jrswgtr on CodePen.

License.

style.css

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

.aligner-item {
  max-width: 50%;
}

.aligner-item--top {
  align-self: flex-start;
}

.aligner-item--bottom {
  align-self: flex-end;
}