CSS Centering_html/css_WEB-ITnose の完全ガイド

もともと CSS-Trick で公開されたこの記事は、記事内のメソッドの抽出に重点を置いており、完全には翻訳されていません。必要に応じて、原文を直接ご覧ください。

CSS の要素の中央揃えの問題についてよく不満を言う人がいますが、実際には、この問題は複雑ではなく、単に多くの方法があり、状況に応じてその中から 1 つを選択する必要があるだけです。次に、問題を単純化するために「デシジョン ツリー」を作成します。まず、中央揃えにする必要があります:

• 水平方向

  • inline または inline-* 要素 (テキストやリンクなど) を中央揃えにする必要がありますか?

  • ブロック クラス要素を中央に配置する必要がありますか?

  • 複数のブロック要素を中央に配置する必要がありますか?

• 垂直

  • inline または inline-* 要素 (テキストやリンクなど) を中央揃えにする必要がありますか?

  • ブロック クラス要素を中央に配置する必要がありますか?

• 水平方向と垂直方向の両方

  • 幅と高さは固定

  • いいえ 固定幅と高さ

  • フレックスボックスを使用

水平方向の中央揃え

水平方向の中央揃え インラインまたはインライン-* 要素

インライン要素をブロック要素内で水平方向に簡単に中央に配置できます。 次のコードは、inline、inline-block、inline-table、inline-flex などに有効です。

.parent {  text-align: center;}

ブロッククラスの要素を水平方向にセンタリング

ブロック要素を固定幅に設定した場合、要素の margin-left と margin-right の値を auto に設定する方法が使えます水平方向のセンタリングを実現します。

.child {  width: 400px;  margin: 0 auto;}

複数のブロック クラスの要素を水平方向に中央揃え

インライン ブロックを通じて実現

.parent {  text-align: center;}.child {  display: inline-block;  text-align: left;}

フレックスボックスを通じて実現

.parent {  display: flex;  justify-content: center;}

垂直方向に中央揃え

垂直方向の中央揃えの inline または inline-* 要素

単一行

インライン/テキスト要素は、同じ上下のパディング値を設定するだけで垂直方向の中央揃えを実現できます。

.center {  pading-top: 30px;  padding-bottom: 30px;}

何らかの理由でパディングを使用できない場合は、line-height を高さと同じに設定して目的を達成することもできます。

.center {  height: 100px;  line-height: 100px;  white-space: nowrap;}

複数行

この状況にも同じ上下のパディングを適用できます。それが機能しない場合は、親要素の表示を設定してみてください。要素を table に変換すると同時に、要素の表示が table-cell に設定され、さらにvertical-alignが設定されます。

.parent {  display: table;  width: 200px;  height: 400px;}.child {  display: table-cell;  vertical-align: middle;}

上記の方法が機能しない場合は、フレックスボックスを使用して、単一のフレックスボックス子要素を親要素内で簡単に中央に配置できます。この方法では、親要素の高さが固定されている必要があることに注意してください。

.parent {  display: flex;  justify-content: center;  flex-direction: column;  height: 400px;}

上記の 2 つの方法のどちらも使用できない場合は、擬似要素 ::before を使用して高さを拡張し、テキストを垂直方向に中央揃えにする「ゴースト要素」テクニックを使用できます。

.parent {  position: relative;}.parent::before {  content: " ";  display: inline-block;  height: 100%;  width: 1%;  vertical-align: middle;}.child {  display: inline-block;  vertical-align: middle;}

垂直中央のブロック クラス要素

既知の要素の高さ

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */}

不明な要素の高さ

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  transform: translateY(-50%);}

フレックスボックスを使用

.parent {  display: flex;  flex-direction: column;  justify-content: center;}

水平方向と垂直方向の両方

幅と高さは固定です

.parent {  position: relative;}.child {  width: 300px;  height: 100px;  padding: 20px;  position: absolute;  top: 50%;  left: 50%;  margin: -70px 0 0 -170px;}

幅と高さは固定されていません

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

フレックスボックスを使用します

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