position:absoluteで要素を上下左右中央に配置する方法【CSS】

こんにちは！コーダーのゆうしです。

コーディング中に「画像の上にテキストを重ねて中央に配置したい」「絶対配置した要素を親要素の真ん中に置きたい」という場面、よくありますよね。position: absolute と transform を組み合わせるとシンプルなコードで実現できます。この記事では上下左右中央・上下中央・左右中央の3パターンを解説します。

表示イメージ

ざっとこのような感じです。画像の上に絶対配置で”テキスト”を上に配置するイメージです。

使用するHTML（3パターン共通）

<div class="area">
  <p>テキスト</p>
  <img src="image.jpg" width="800" height="400" alt="背景画像">
</div>

親要素の .area に position: relative を指定して、子要素の <p> に position: absolute を指定して配置していきます。

① 上下左右中央に配置する

.area {
  position: relative;
}

.area p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top: 50% と left: 50% だけでは要素の左上の角が親要素の中央に来るだけで、要素自体は中央に来ません。transform: translate(-50%, -50%) で要素自身の幅と高さの半分だけ左上方向に戻すことで、要素の中心が親要素の中心に来るようになります。

親要素の幅が変動しても常に中央に配置されるのがこの手法の強みです。

② 上下中央に配置する

.area {
  position: relative;
}

.area p {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

top: 50% と transform: translateY(-50%) の組み合わせで上下方向だけ中央に配置します。left: 0 で左端に揃えていますが、任意の値に変更して横位置を調整してください。

③ 左右中央に配置する

.area {
  position: relative;
}

.area p {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

left: 50% と transform: translateX(-50%) の組み合わせで左右方向だけ中央に配置します。top: 0 で上端に揃えていますが、任意の値に変更して縦位置を調整できます。

transformのまとめ

3パターンで使ったtransformを整理するとこうなります。

応用：flexboxで中央配置する方法

position: absolute を使わずに flexbox で中央配置する方法もあります。絶対配置が不要な場合はflexboxのほうがシンプルに書けます。

.area {
  display: flex;
  justify-content: center; /* 左右中央 */
  align-items: center;     /* 上下中央 */
}

絶対配置（position: absolute）は「画像の上にテキストを重ねる」「親要素の特定の位置に固定する」など、要素を重ねたいときに使います。単純に中央に並べたいだけならflexboxで十分なケースも多いので、用途に応じて使い分けてみてください。

躓きやすいポイント

中央に配置されない

親要素に position: relative が指定されていないと、position: absolute の基準が意図しない祖先要素になってしまいます。必ず親要素に position: relative を指定してください。

テキストが画像の外に出てしまう

親要素に overflow: hidden を指定すると、絶対配置した要素がはみ出ないようにできます。ただし transform で要素が親要素の外に出ている部分がクリップされるので注意してください。

transformが効かない

-webkit-transform や -ms-transform などベンダープレフィックスを付けていたコードを見かけることがありますが、現在の主要ブラウザではプレフィックスなしの transform だけで問題なく動作します。古い環境へのサポートが必要な場合のみ追記してください。

まとめ

position: absolute と transform: translate を組み合わせることで、親要素の幅が変動しても常に中央に配置できます。上下左右・上下のみ・左右のみの3パターンを覚えておけば実務のほとんどの場面に対応できます。単純な中央寄せにはflexboxも便利なので、場面に応じて使い分けてみてください。

ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。