CSS レイアウトチュートリアル: 垂直方向の中央揃えを実現する方法

序文

最近、フロントエンドの知識をまとめており、いくつかのインタビューにも参加しました。インタビュー中に、垂直方向の中央揃えを要求する質問に遭遇しました。ここでこれをまとめ、知識を固めたいと思います。

CSS 垂直中央揃え

1. 中央揃えを実現するには、line-height を使用します。この方法は、純粋なテキストに適しています。

<!-- css -->
<スタイル>
。両親 {
  高さ: 400px;
  行の高さ: 400px;
  幅: 400ピクセル;
  境界線: 1px 実線の赤;
  テキスト配置: 中央;
}

。子供 {
  背景色: 青;
  色: #fff;
}
 </スタイル>
</head>

<本文>
<!-- html -->
<div class="親">
   <span class="child">CSS レイアウト、垂直方向の中央揃え</span>
</div>
</本文>

2. 親コンテナの相対的な配置と子コンテナの絶対的な配置を設定することで、ラベルは余白を通じて中央に配置されます。

<!-- css -->
<スタイル>
。両親 {
  高さ: 400px;
  幅: 400ピクセル;
  境界線: 1px 実線の赤;
  位置: 相対的;
}

。子供 {
  幅: 200ピクセル;
  高さ: 100px;
  行の高さ: 100px;
  テキスト配置: 中央;
  色: #fff;
  背景色: 青;
  /* 4 つの方向を 0 に設定し、マージンを自動に設定して中央に配置します */
  位置: 絶対;
  上: 0;
  右: 0;
  下部: 0;
  左: 0;
  マージン: 自動;
}
 </スタイル>
</head>

<本文>
<!-- html -->
<div class="親">
  <span class="child">CSS レイアウト、垂直方向の中央揃え</span>
</div>
</本文>

3. 柔軟なレイアウト flex 親は display: flex に設定され、子は margin auto に設定されて適応的な中央配置が実現されます。

  <!-- css -->
  <スタイル>
    。両親 {
      高さ: 400px;
      幅: 400ピクセル;
      境界線: 1px 実線の赤;
      ディスプレイ: フレックス;
    }

    。子供 {
      幅: 200ピクセル;
      高さ: 100px;
      行の高さ: 100px;
      テキスト配置: 中央;
      色: #333;
      背景色: 黄色;
      マージン: 自動;
  }
 </スタイル>
</head>

<本文>
 <!-- html -->
  <div class="親">
    <span class="child">CSS レイアウト、垂直方向の中央揃え</span>
  </div>
</本文>

4. 親は相対的な位置に設定され、子は絶対的な位置に設定され、これは変位変換によって実現されます。

  <!-- css -->
  <スタイル>
    。両親 {
      高さ: 400px;
      幅: 400ピクセル;
      境界線: 1px 実線の赤;
      位置: 相対的;
    }

    。子供 {
      幅: 200ピクセル;
      高さ: 100px;
      行の高さ: 100px;
      テキスト配置: 中央;
      色: #fff;
      背景色: 緑;
      位置: 絶対;
      上位: 50%;
      左: 50%;
      変換: translate(-50%, -50%);
    }
  </スタイル>
</head>

<本文>
  <!-- html -->
  <div class="親">
    <span class="child">CSS レイアウト、垂直方向の中央揃え</span>
  </div>
</本文>

5. 親はエラスティックボックスを設定し、エラスティックボックス関連のプロパティを設定します。

 <!-- css -->
 <スタイル>
    。両親 {
      高さ: 400px;
      幅: 400ピクセル;
      境界線: 1px 実線の赤;
      ディスプレイ: フレックス;
      justify-content: center; /* 水平 */
      align-items: center; /* 垂直 */
    }

    。子供 {
      幅: 200ピクセル;
      高さ: 100px;
      色: 黒;
      背景色: オレンジ;
    }
  </スタイル>
</head>

<本文>
  <!-- html -->
  <div class="親">
    <span class="child"></span>
  </div>
</本文>

6. グリッドレイアウトでは、親がテーブルに変換され、子がインラインまたはインラインブロックに設定されます。 (vertical-align: middle を使用するための前提条件は、インライン要素と、display 値が table-cell である要素であることに注意してください)。

 <!-- css -->
 <スタイル>
    。両親 {
      高さ: 400px;
      幅: 400ピクセル;
      境界線: 1px 実線の赤;
      表示: テーブルセル;
      テキスト配置: 中央;
      垂直位置合わせ: 中央;
    }

    。子供 {
      幅: 200ピクセル;
      高さ: 100px;
      色: #fff;
      背景色: 青;
      display: inline-block; /* 子要素の設定はインラインまたはインラインブロック*/
    }
  </スタイル>
</head>

<本文>
  <!-- html -->
  <div class="親">
    <span class="child"></span>
  </div>
</本文>

要約する

以上がこの記事の全内容です。この記事の内容が皆様の勉強や仕事に何らかの参考学習価値をもたらすことを願います。123WORDPRESS.COM をご愛顧いただき、誠にありがとうございます。

<<: シームレスなトークンリフレッシュを実現する方法

>>: Webスキル: 複数のIEバージョンの共存ソリューション IETester