Zenn
📦

absoluteを使った上下左右中央寄せ

2024/05/02に公開
CSS
HTML
tech

absoluteを使って、なにかを上下中央寄せ・左右中央寄せにすることが多いので方法をまとめます。

準備

中央寄せしたいアイテム（子）と、その親を用意しておきます。
今回は親要素に「parent」を、子要素に「child」を用意しました。
今回は最新のブラウザできちんと表示されることを優先しているので、ベンダープレフィックスについては取り上げません。

    <div class="parent">
      <div class="child"><p>子です</p></div>
    </div>


      .parent {
        background-color: pink;
        width: 500px;
        height: 500px;
      }
      .child {
        border: solid 2px red;
        display: inline-block;
      }

左右中央寄せ


HTMLに変更は加えていません。

CSSの解説をこの下でしています。

      .parent {
        background-color: pink;
        width: 500px;
        height: 500px;
        /* 以下を追加しました */
        position: relative;
      }
      .child {
        border: solid 2px red;
        display: inline-block;
        /* 以下を追加しました */
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }

CSSの解説です。

.parent

.parentに書き足したposition: relative;は、子要素を絶対的な位置で配置するための準備です。これがないと、子要素の位置を変更しても反映されません！

.child

.childには、position: absolute;を追記しました。これは、親要素から離れた位置に移動させたい時に使うものです。これがないと、位置の変更ができません！
top: 0;とleft: 50%;は、上から0%移動・左から50%移動という意味です。
ここまでで左右中央になりそう！と思いますがtransform: translateX(-50%);がない状態で画面を確認すると…ちょっと中央からズレています。

このちょっとしたズレを解消するためにtransform: translateX(-50%);を追記しました。
これは、子要素が自分の幅の半分だけ左に移動する意味を持ちます。たしかに、このズレは少し左に動けば解消されそうですよね。

ちなみに、X軸は横の線・縦の線はY軸をあらわしています。数学の授業で見たことがあるような…
今回は左右（横の中央に移動したい）の中央寄せだったのでtranslateX(-50%)を使いました。

上下中央寄せ

HTMLに変更は加えていません。

      .parent {
        background-color: pink;
        width: 500px;
        height: 500px;
        /* 以下を追加しました */
        position: relative;
      }
      .child {
        border: solid 2px red;
        display: inline-block;
        /* 以下を追加しました */
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }

.parent

.parentには左右中央寄せと同様にposition: relative;を追記しています。
.childには、絶対配置をあらわすposition: absolute;を追記。

.child

さらに、上下の中央をあらわすtop: 50%;と子要素の高さの半分だけ上に移動するtransform: translateY(-50%);を入れました。

上下・左右中央寄せの両方を学びました。
ふたつ組み合わせたら、親要素の中央に子要素が配置できるはずです！
早速やってみましょう！

上下左右中央寄せ

今回もHTMLに変更は加えていません。

      .parent {
        background-color: pink;
        width: 500px;
        height: 500px;
        /* 以下を追加しました */
        position: relative;
      }
      .child {
        border: solid 2px red;
        display: inline-block;
        /* 以下を追加しました */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

.childに、上下の中央をあらわすtop: 50%;と左右の中央をあらわすleft: 50%;を追記しました。

さらにtransform: translate(-50%, -50%);は、transform: translateY(-50%);と transform: translateX(-50%);をまとめてあらわしたものです。
これで、子要素の幅・高さの半分だけズレさせることにより、上下左右中央への配置を実現できました。

覚え方のコツ

左右を中央にしたいときは横への移動だからXを使ったtransform: translateX(-50%);、
上下の中央寄せには、縦軸の移動だからYを使ったtransform: translateY(-50%);と覚えるとスムーズかと思います。

私はどうしても忘れてしまうので、Y（縦軸の上下移動）は「わーいわーい」のバンザイで上！って覚え方をしています。

Discussion