CSS を使用して div を垂直方向に中央揃え

1. 内側の div の top および transform プロパティを使用して、CSS を使用して div を垂直方向に中央揃えにする
2. CSS Flexbox を使用して、CSS の div を垂直方向に中央揃えにする

この記事では、CSS の div を垂直方向に中央揃えにする方法を紹介します。

内側の div の top および transform プロパティを使用して、CSS を使用して div を垂直方向に中央揃えにする

この方法では、2つのコンテナを使用して、div を垂直方向に中央揃えする方法を示します。

まず、外側と内側の div を作成します。ここで、内側の div を外側の div に対して垂直に中央に配置します。CSS プロパティ transform と top を使用して、内側の div を垂直方向に中央揃えできます。

top プロパティは、配置された要素の垂直位置のみを設定します。プロパティは、要素に適用される位置プロパティに応じて異なる動作を示します。

たとえば、position が relative に設定されている場合、要素の上端は通常の位置から下または上に移動します。transform プロパティはさまざまな値を取り、translateY() が使用します。

translateY() 関数は、Y 軸からのみ要素を変換します。これらの 2つのプロパティを使用して、div を垂直方向に中央揃えできます。

たとえば、div 要素を作成し、それを HTML の別の div 要素でラップします。CSS で、外側の div を選択し、height、width、および background-color を 180px、300px、および blue に設定します。

次に、内側の div を選択し、position プロパティを relative に設定します。次に、background-color プロパティとして red を適用し、div に 20px の高さを指定し、transform プロパティの値として translateY(-50%) を使用します。

以下の例では、top プロパティの 50%値は、内側の div の上端を外側の div の垂直中央部に配置します。ただし、内側の div は 20px の height を持っているため、中央に配置されていません。

translateY(-50%) の値は、高さの 50％で上端を上に移動します。負の値のために上に移動します。つまり、div は 10px を上に移動します。このようにして、内側の div は垂直方向の中央に配置されます。

サンプルコード：

<div class='outer-div'>
 <div class='inner-div'>
 
 </div>
</div>

div.outer-div {
 height: 180px;
 width: 300px;
 background-color: blue;
}

div.inner-div {
 position: relative;
 background-color:red;
 height:20px;
 top: 50%;
 transform: translateY(-50%);
}

CSS Flexbox を使用して、CSS の div を垂直方向に中央揃えにする

柔軟なコンテナを作成し、justify-content プロパティと align-items プロパティを使用して、CSS の div を垂直方向に中央揃えにすることができます。display プロパティを使用して、コンテナをフレックスボックスとして定義できます。

justify-content プロパティは、フレックスボックス内の要素を水平方向に配置します。flex-start、flex-end、center などのさまざまなオプションがあります。

同様に、align-items プロパティは、要素をフレックスボックス内に垂直に配置します。

たとえば、クラス box を使用して div を作成し、その中に別の div を作成します。内側の div 内にテキストを書き込みます。

CSS で body タグと html タグを選択し、高さを 100%に設定します。次に、box クラスを選択し、その height を 100%に設定します。

background を red に設定し、display プロパティを flex に設定します。最後に、値 center を justify-content プロパティと align-items プロパティの両方に設定します。

以下の例では、div 内のテキストを垂直方向と水平方向の中央に配置します。これらの 2つのプロパティは、柔軟なコンテナ内でのみ使用できます。

したがって、フレックスボックスを使用して div を中央に配置できます。

サンプルコード：

<div class="box">
 <div>The Div</div>
</div>

html,body {
 height: 100%;
}

.box {
 height: 100%;
 background: red;
 display: flex;
 justify-content: center;
 align-items: center;
}