【CSS中央寄せ】絶対位置を使ったCSS中央配置とその他の基本の中央配置

CSSでの中央配置は、デザインをシンプルかつ美しく見せるために非常に重要です。
中央配置を簡単に理解できる方法と、覚えやすくするためのコツを紹介します。

絶対位置を使った中央配置

絶対位置を使っての中央配置する方法になります。
親要素に position: relative; を設定し、子要素に position: absolute; と transform を使用して中央に配置します。

以下は、transform を未使用、使用の2つが混在したサンプルコードになります。
transform を使用することで、完全な中央配置にすることができます。

See the Pen transform-translate by Hiroyuki Koyama (@soushin-horoyuki) on CodePen.

親要素には以下コード

.wrapper {
  position: relative;
}

子要素には以下コード

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 要素を中央に調整 */
}

このコードを覚えておけば絶対位置の中央配置は間違いないです。

その他の基本の中央配置

その他基本の中央配置の説明になります。まずはデモコードを確認ください。

See the Pen css_center by Hiroyuki Koyama (@soushin-horoyuki) on CodePen.

1. Flexboxによる中央配置

Flexboxは、最も簡単で強力な方法の一つです。親要素に display: flex を設定し、justify-content と align-items を使用することで、横軸・縦軸両方の中央配置が一度に行えます。

.container {
  display: flex;
  justify-content: center; /* 横方向の中央 */
  align-items: center;     /* 縦方向の中央 */
  height: 100vh;           /* 画面全体を使いたい場合 */
}

• justify-content: center; は、横方向（左右）に中央配置を行います。
• align-items: center; は、縦方向（上下）に中央配置を行います。
これにより、親要素内の子要素が簡単に中央に配置されます。

2. Block要素の中央配置

Block要素を中央に配置する場合は、margin: 0 auto; を使用します。これにより、要素が左右の余白を均等に持ち、中央に配置されます。

.block-center {
  margin: 20px auto;
  width: 260px;
  text-align: center;
}

• margin: 0 auto; は、要素を水平に中央に配置します。

3. テキストの中央配置

テキストを中央に配置するのは簡単です。text-align: center; を親要素に設定することで、テキストやインライン要素が中央に配置されます。

.text-center {
  text-align: center;
}

これで、テキストが親要素内で水平に中央配置されます。縦方向も中央にしたい場合は、line-height を調整する方法が有効です。

覚えやすくするためのポイント

CSSで中央配置を覚えるためには、以下のポイントを押さえておくと便利です。

• Flexboxを優先する
  Flexboxは、両方向の中央配置を簡単に実現できるため、まずはこれを覚えましょう。
• margin: auto
  固定幅の要素を中央に配置する場合は、margin: 0 auto; を使いましょう。これで横方向の中央が簡単に実現できます。
• position: absolute
  親要素を相対位置にして、子要素を絶対位置で中央に配置する方法を覚えておくと、複雑なレイアウトにも対応できます。
• テキスト中央配置
  テキストの中央配置には text-align: center; を使います。簡単ですが、意外と便利です。