CODE html/css

【CSS】position: absolute;で上下左右の中央寄せする方法

更新日:

positionのabsoluteを使って要素を配置する際に上下左右の中央に配置したい時の方法です。
画像と同じ方法で、文字は中央寄せができなかったので別々に紹介します。

目次

  1. 画像の中央寄せ
  2. 文字の中央寄せ
  3. まとめ

画像の中央寄せ

左右の中央寄せ

See the Pen bGpWLNz by yoshiya.kiryu (@yoshiyakiryu) on CodePen.

左右の位置をleft,rightでゼロにして、marginのautoです。
後はこの応用です。

上下の中央寄せ

See the Pen GRZmQWY by yoshiya.kiryu (@yoshiyakiryu) on CodePen.

上下の位置をtop,bottomでゼロにして、marginのautoです。

上下左右の中央寄せ

See the Pen mdPmXwz by yoshiya.kiryu (@yoshiyakiryu) on CodePen.

上下左右を組み合わせただけです。



文字の中央寄せ

文字の中央寄せは画像と同じ方法ではうまくいきませんでした。
そこでtransformを使った中央寄せです。
まず、親要素を基準に50%分、移動。

このままだと子要素の大きさ分だけ少しズレてしまうので、transformを使って子要素の50%分、戻します。

See the Pen wvGdmwa by yoshiya.kiryu (@yoshiyakiryu) on CodePen.

これで文字も中央寄せになりました。



まとめ

画像と同じ方法で文字が中央寄せにならない理由はよく分からず・・
同じ方法だと覚えやすいですが、やり方を覚えるのではなく、やり方を記載した場所を検索しやすいようにしておけば楽ですね。

-CODE, html/css
-, , , , , ,

Copyright© kerublog , 2021 All Rights Reserved Powered by STINGER.