CSS の垂直方向の中央揃えの 7 つの方法のまとめ

CSS を垂直方向に中央揃えにする 7 つの方法

---

デモンストレーションするには、まず 2 つのネストされた div を作成し、効果が見やすくなるようにサイズと背景色を設定します。コードは以下のように表示されます。

// html
<div class="outer outer-box">
  <div class="inner inner-box"></div>
</div>

// css
<style>
.outer {
  height: 100px;
  width: 100px;
  background-color: royalblue;
}
.inner {
  height: 50px;
  width: 50px;
  background-color: red;
}
<style>

設定後の効果は次のようになります。次に、内側の div を水平方向と垂直方向の中央に配置する必要があります。始める準備ができました。それぞれフレックスレイアウト、ポジションレイアウト、グリッドレイアウトを使用します。

フレックスレイアウト

フレックスとはFlexible Boxの略称で、「伸縮自在なレイアウト」を意味します。フレキシブル ボックス モデルは、一度に 1 次元のレイアウトのみを処理できる 1 次元レイアウト モデルです。フレックス レイアウトには、主軸と交差軸の 2 つの軸があります。Flex は、これら 2 つの軸に従って要素をレイアウトします。

1.1 外側の div のフレックス レイアウトを設定する

外側の div に justify-content: center; align-items: center; プロパティを設定すると、表示が flex に設定されます。水平方向と垂直方向のセンタリングが可能です。

1.2 内側の div と外側の div は別々に設定されます

結果は次のとおりです。

フレックスで水平配置のセンタリングを実現

ポジションレイアウト

位置レイアウトは従来のレイアウト方法であり、位置属性によって配置方法が指定され、配置レイアウトを実現するために CSS ボックス モデルが使用されます。

2.1 margin 属性を使用して内部 div を中央に配置する

2.2 内部 div は、transform 属性を使用して中央に配置されます

実現結果は以下の通りです。

グリッドレイアウト

グリッド (グリッド) レイアウトは、最も強力な CSS レイアウト スキームとして知られており、ページをいくつかの主要な領域に分割し、これらの領域のサイズ、位置、階層、その他の関係を定義できます。

上記のレイアウトではグリッドが非常に優れています。フレックス レイアウトは 1 次元レイアウトに属し、グリッド レイアウトはコンテナを行と列に分割し、セルをレイアウトすることができ、2 次元レイアウトに属します。

3.1 外側の div は place-content 属性を使用します

3.2 外側の div はグリッド レイアウトを使用します

3.3 内側の div と外側の div を個別に設定する

実現結果は以下の通りです。

要約する

一般的な問題は必ずしも単純ではなく、フロントエンドの知識は多くの場合学習され、新しいものになります。さまざまなタイプの CSS レイアウト方法を理解することは、実際的な問題に対処するのにも非常に役立ちます。