上下左右の「中央揃え」徹底解説

このページの目的

テキストや画像、ボックスなどを、親要素の「上下左右まん真ん中」に配置する方法を学びます。様々な方法がありますが、状況に応じて最適なテクニックを使い分けることが重要です。

grid_view中央揃えの基本パターン

中央揃えには、主に以下の4つの方法があります。

• 方法①：インライン要素（テキストなど）の中央揃え
• 方法②：ブロック要素（幅が決まった箱など）の中央揃え
• 方法③：positionを使った、親要素を基準にした中央揃え
• 方法④：Flexboxを使った、最もモダンで簡単な中央揃え

---

build実装方法

方法①：インライン要素（テキスト）の中央揃え

一行のテキストを、親要素の中で上下左右中央に配置する、最も基本的な方法です。

<!-- HTML -->
<div class="text-box">
  中央揃えのテキスト
</div>

<!-- CSS -->
.text-box {
  width: 300px;
  height: 100px;
  text-align: center;      /* 左右の中央揃え */
  line-height: 100px;      /* 上下の中央揃え（heightと同じ値を指定） */
  border: 1px solid #ccc;
}

ポイント：line-heightに要素のheightと同じ値を指定することで、テキストが垂直方向の中央に配置されます。

方法②：ブロック要素（幅が決まった箱）の中央揃え

横幅が決まっているブロック要素を、親要素の中で左右中央に配置する方法です。

<!-- HTML -->
<div class="parent-box">
  <div class="child-box">この箱を中央へ</div>
</div>

<!-- CSS -->
.child-box {
  width: 200px;         /* ★幅の指定が必須 */
  margin: 0 auto;       /* ★左右のmarginをautoに設定 */
  background: #eee;
}

ポイント：margin: 0 auto;は、上下のmarginを0、左右のmarginを「自動」に設定するショートハンドです。ブラウザが左右の余白を均等に計算してくれるため、結果として中央に配置されます。

方法③：positionを使った中央揃え

親要素を基準にして、子要素を絶対位置で上下左右中央に配置する方法です。モーダルウィンドウや、画像の上にテキストを乗せる場合などによく使われます。

<!-- HTML -->
<div class="parent-relative">
  <div class="child-absolute">中央配置</div>
</div>

<!-- CSS -->
.parent-relative {
  position: relative; /* 親要素を基準にする */
}
.child-absolute {
  position: absolute;   /* 親を基準に絶対配置 */
  top: 50%;             /* 親の上から50%の位置へ */
  left: 50%;            /* 親の左から50%の位置へ */
  transform: translate(-50%, -50%); /* 要素自身の大きさの半分だけ戻す */
}

ポイント：transform: translate(-50%, -50%);が、要素のズレを補正して完全に中央に配置するための鍵となります。

方法④：Flexboxを使った中央揃え（一番おすすめ）

現代のレイアウトで最も簡単かつ柔軟な中央揃えの方法です。親要素をFlexコンテナにするだけで、簡単に実現できます。

<!-- HTML -->
<div class="flex-center-container">
  <div class="flex-center-item">中央！</div>
</div>

<!-- CSS -->
.flex-center-container {
  display: flex;
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center;     /* 垂直方向の中央揃え */
  width: 300px;
  height: 200px;
  background: #eee;
}

ポイント：親要素にdisplay: flex;を指定し、justify-content（横軸）とalign-items（縦軸）を両方`center`にするだけです。

---

---