CSS で垂直方向の中央揃えを実装するいくつかの方法の概要

フロントエンドのレイアウトプロセスでは、水平方向の中央揃えを実現するのは比較的簡単で、通常は margin:0 auto; と親要素の text-align: center; によって実現できます。しかし、垂直方向の中央揃えを実現するのはそれほど簡単ではありません。以下では、私が作品で垂直方向の中央揃えを実現するために使用しているいくつかの方法を紹介します。

1. 行の高さは高さと等しい/行の高さのみを設定する

この方法は、テキストを中央揃えするのに適しています。コアは、行の高さをそれを囲むボックスの高さと同じに設定するか、高さを設定せずに行の高さを設定することです。この方法は、テキストが中央揃えされ、高さが固定されているシーンに適しています。使用すると便利で役立ちます。

//html
<div class="middle">555</div>
 
//css
。真ん中{
  高さ: 50px;
  行の高さ: 50px;
  背景: 赤;
}

注目すべきは

インライン要素の場合は高さがないので、まずインライン要素をインラインブロックまたはブロック要素に変換する必要があります。

2. 垂直位置合わせ: 中央

この種の要素の中央揃えでは、親要素の行の高さが自身の高さと等しい必要があり、この要素はインラインブロック要素です。 3 つの条件がすべて満たされた場合にのみ、垂直方向のセンタリングを実現できます。コードは次のとおりです。

//html
<div class="main">
   <div class="middle"></div>
</div>

//css
。主要 {
  幅: 200ピクセル;
  高さ: 300px;
  行の高さ: 300px;
  背景: #dddddd;
}
。真ん中{
  背景: 赤;
  幅: 200ピクセル;
  高さ: 50px;
  display: inline-block; // または display: inline-table;
  垂直位置合わせ: 中央;
}

この方法では固定の行の高さが必要であり、実際に達成される中央揃えは真の中央揃えではなく、近似中央揃えであることに注意してください。

3. 絶対位置と負のマージン

この方法の核となるのは、まず中央に配置する要素を絶対位置に設定し、次にその top: 50%; に要素自体の高さの負の半分に等しい margin-top を加えて中央に配置することです。利点は、実装が簡単で、親要素の高さをパーセンテージで指定でき、行の高さを設定する必要がないことです。コードは次のとおりです。

//html
<div class="main">
  <div class="middle"></div>
</div>
  
//css
。主要 {
  幅: 60ピクセル;
  高さ: 10%;
  背景: #dddddd;
  position: relative; //親要素は相対位置に設定されます}
。真ん中{
  position: absolute; //絶対位置に設定します top: 50%; //上の値は50%です
  margin-top: -25%; // margin-top を要素の高さの半分に設定します width: 60px;
  高さ: 50%;
  背景: 赤;
}

4. 絶対位置と margin:auto

まずコード:

//html
<div class="main">
  <div class="middle"></div>
</div>
  
//css
。主要 {
  幅: 60ピクセル;
  高さ: 10%;
  背景: #dddddd;
  position: relative; //親要素は相対位置に設定されます}
。真ん中{
  幅: 30%;
  高さ: 50%;
  position: absolute; //絶対位置に設定します top: 0;
  bottom: 0; // 上と下を 0 に設定します。
  left: 0; //left と right も 0 に設定すると、水平方向と垂直方向の両方の中央揃えを実現できます right: 0;
  マージン:自動;
  背景: 赤;
}

この方法の利点は、垂直方向のセンタリングだけでなく、水平方向のセンタリングも実現できることです。欠点は、ネットワークやパフォーマンスが悪い場合に、ボックスが直接固定されず、ユーザーエクスペリエンスが低下する可能性があることです。

5. フレックスレイアウト

フレックスレイアウトは垂直方向と水平方向の中央揃えを簡単に実現できるため、多くの利点があり、モバイル端末で広く使用されています。欠点は、ブラウザの互換性が低いことです。コードは次のとおりです。

//html
<div class="main">
  <div class="middle"></div>
</div>
 
//css
。主要 {
  幅: 60ピクセル;
  高さ: 10%;
  背景: #dddddd;
  display: flex; //flexに設定
  justify-content: center; // 水平中央 align-items: center; // 垂直中央}
。真ん中{
  幅: 30%;
  高さ: 50%;
  背景: 赤;
}