CSSで実装する上下左右中央表示

パターン① Flexbox（王道）

✔ 特徴

• 現代CSSの基本
• 1要素でも複数要素でも対応しやすい
• レスポンシブでも安定
• まずこれを覚えればOK

.box {
  display: flex; /* “並べ方をFlexで管理します”という宣言 */
  justify-content: center; /* 横方向の中央 */
  align-items: center; /* 縦方向の中央 */
}

<div class="box flex-demo">
  <div class="item">中央</div>
</div>

パターン② position + transform（少々古い）

✔ 特徴

• 昔からある方法
• CSSの座標概念を説明するのに向いている
• 要素サイズが不明でもセンタリングできる

.box {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="box flex-demo">
  <div class="item">中央</div>
</div>