CSSを使用してdiv要素を垂直に中央揃えする方法

1. flexboxを使用する方法: flexboxは、要素を柔軟に配置するためのCSSの機能です。以下のコードを使用して、div要素を垂直に中央揃えすることができます。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 要素の高さを画面の高さと同じにする */
}

2. transformとpositionを使用する方法: transformプロパティとpositionプロパティを組み合わせて、div要素を垂直に中央揃えすることもできます。

.container {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

3. table-cellを使用する方法: table-cellを使用すると、要素をテーブルのセルのように配置できます。

.container {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 水平方向にも中央揃えする場合 */
}

これらの方法を使用すると、div要素を垂直に中央揃えすることができます。また、レスポンシブデザインにも対応しており、異なる画面サイズに適応します。