[CSSレイアウト例】CSSで中央揃えを実現する方法N種

プリアンブル

入社して間もない頃、面接官からセンターリングの質問を連発され、罵倒されたことがあります。"テキストのセンタリングはどうやるんですか？" "複数行のテキストならどうする？" "ブロックレベルの要素を水平にセンタリングするにはどうすればいいのか？" "ブロックレベル要素を垂直方向にセンタリングするには？ブロックレベル要素の垂直方向のセンタリングを実現する方法". 質問は、泥沼の脳の後ろに頼まれた、知っていただろうし、どのように答えるかわからない。センタリングは日常業務で避けて通れないシナリオであり、インタビューでも頻出する。今回は、これらを踏まえて、当時の私と同じような疑問を持っている学生の皆さんが、今後、センタリング問題に直面したときに、仕事や面接に役立てばと思い、この記事を書きました。

インライン要素のセンタリング

テキストの垂直方向へのセンタリング

一行テキストの縦方向中央揃え

1行のテキストを垂直方向にセンタリングするのは最も簡単で、line-heightをボックスと同じ高さに設定するだけです。
/{br ここで誤解があります、多くの人は一行テキストのセンタリングを設定するときに、高さとline-heightを同時に設定します、実際には、高さを設定する必要はありません、line-heightだけを設定することができます、それから、ボックスの高さはline-heightによってサポートされています、line-heightは全く同じです。

.center {
  // You can set no height at all
  // height: 20px;
  line-height: 20px;
}

複数行のテキストを縦方向に中央揃え