position:absolute;で要素を中央配置にする方法

position:absolute;で中央配置

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg
  • 上下左右で中央揃えにしたい
  • 左右・上下、片方だけ中央寄せにしたい
  • 具体的な挙動の解説が欲しい

こんな疑問に答えます。

要素を上下左右で中央寄せする方法はたくさんありますね。

ですが、もっとも簡単でポピュラーなのはPosition:absolute;を利用した方法です。

本記事では、Position:absolute;の中央寄せの方法と解説をしています。

これから中央寄せを行いたい方は、ぜひ参考にしてみてください。

Position:absolute;を使用して中央配置した例

例えば、大きなdivタグの中で、imgタグを中央配置したいとします。

下の画像のような状況ですね。

中央配置

このような挙動を実現することができるのが、position:absolute;を使用した中央配置です。

ちなみに、どのような要素でも中央寄せすることができます。

ブロックの要素でも、インラインの要素でも、擬似要素でも中央寄せすることができます。

それでは、具体的なソースコードをご紹介します。

Position:absolute;で中央配置するコード

今回ご紹介するのは、以下の3通りです。

  • 上下左右の中央配置
  • 上下のみの中央配置
  • 左右のみの中央配置

ですが、基本的なコードの書き方は全て同じです。

応用が効く、上下左右の中央配置のやり方さえマスターすればOKです。

上下左右の中央配置

上下左右の中央配置

まずは、上下左右の中央寄せから解説します。

ソースコードは以下の通りです。

<div>
 <img src="/" widht="300" height="200" alt="/" >
</div>
div{
 position: relative;
}

div img{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

上記のコードで実装できます。

上下のみの中央配置

上下の中央配置

次に、上下の中央寄せから解説します。

ソースコードは以下の通りです。HTMLは共通ですね。

<div>
 <img src="/" widht="300" height="200" alt="/" >
</div>

上下左右中央寄せと異なる点が、CSSです。

  • Lest:50%;がなくなった
  • transformの値がtranslateY(-50%)に変わった

この2点にだけ注目です!

div{
 position: relative;
}

div img{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}

詳しいことは最後にまとめてしますが、上記のコードで上下中央揃えを実装できます。

左右の中央配置

左右の中央配置

最後に、左右の中央寄せから解説します。

HTMLは共通です。

<div>
 <img src="/" widht="300" height="200" alt="/" >
</div>

こちらも、上下左右中央寄せと異なる点がCSSです。

  • Top:50%;がなくなった
  • transformの値がtranslateX(-50%)に変わった

この2点にだけ注目です!

div{
 position: relative;
}

div img{
 position: absolute;
 Left: 50%;
 transform: translateX(-50%);
}

上記のコードで左右中央揃えを実装できます。

Position:absolute;で中央寄せできる理由

結論としては、Position:absolute;状態でleftとtopの指定で中央配置を行い、transformで微調整している感じです。

文章だと伝えきれないので、画像を用いて説明します。

まずは、CSSで何も指定していない場合です。画像のように、divタグの左上にimgが配置されます。

上下左右の中央配置する前

その状態で、Position:absolute;を指定しましょう。

その状態でleftやtopを指定すると、divタグの左上が始点になります。

position:absolute;を指定した時

その状態で、topとleftを利用して50%ずつズラします。

position:absolute;で中央配置

しかし、imgの左上が基準となるので、imgの左上が中央に配置されます。

この状態から、transform:translate(X,Y);を利用してimgを移動します。

transform:translate;では、要素の縦(Y軸)と横(X軸)の長さを取得できます。

そのため、transform:translateX(-50%);と指定した場合、img要素の横半分の長さを取得し、X軸に沿ってマイナス方向移動させます。

transform:translateY(-50%);と指定すると、img要素の縦半分の長さを取得し、Y軸に沿ってマイナス方向移動させます。

position:absolute;のtopとleftで移動

transform:translate(-50%,-50%);と指定した場合、XとY軸両方を指定できます。

transform:translate(X,Y);なので、それぞれの値を指定しましょう。

上下左右の中央配置

すると、上下左右の中央を実現することができました。

まとめ:Position:absolute;で中央配置することは簡単

Position: absolute;を初めてみた時は、少し難しいCSSです。

しかし、一つ一つ分解することで、細かな挙動を理解することができます。

ぜひ中央寄せを繰り返し使って、覚えていってください。