垂直センタリング

要素を垂直にセンタリングするいい方法がCSSに存在しないことは、CSSというもの全体の評価にとって汚点であり続けていました。

何が問題をより悪化させたかというと、垂直センタリングを実現するテクニックはあまり知られておらず非直感的で、vertical-align:middleのような最良と思える選択肢は、必要な時には動作したことがないように思われます（※訳注：vertical-alignはブロック要素には適用できないという制約があり、インライン要素とテーブルセルでのみ動作します）。

現在の垂直センタリングの選択肢には、display:table-cellにネガティブマージンを設定するようなものから、縦幅最大の擬似要素を用いた滑稽なハックまで存在します。それらのテクニックが仕事を完了させることはありますが、すべてのシチュエーションで動作するとは限りません。仮に、センタリングしたい要素が不明なサイズであり、親要素に対してのただひとつの子要素ではないとしたらどうでしょう？仮に擬似要素ハックを使うことが出来たとして、他の用途に擬似要素を使う必要が出てきたらどうでしょう？

Flexboxならそんな心配はもうありません。align-items、align-selfやjustify-contentを使って、とても気楽にどんなものでも、垂直にも水平にも整列させることが出来ます。

これはセンタリングされています！

このボックスは垂直・水平方向にセンタリングされています。このボックスの中のテキストがボックスの高さや幅を変更しようとも、ボックスは中央に位置し続けます。さあ、クリックしてこのテキストを編集してみましょう。

すでに存在する垂直方向の整列テクニックとは異なり、Flexboxを使えば、垂直方向の整列が可能かどうかに兄弟要素が影響することはありません。

Top
Centered
Bottom

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>

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;
}

このデモで使用されているAlignerコンポーネントの完全なソースはGitHubにあります。