position:absolute で中央に配置するやり方

position absolute 中央

WEBデザイナーらしくコーディングのこともかいてみようと思います!

今回はposition:absolute;で中央に配置するやり方を2種類ご紹介します。
どちらを使っても得られる結果は同じですが、知っているだけで応用がきいたりするので両方ご紹介します!

01.margin:autoで画面中央に配置するやり方

CSS

中央に配置したい要素に上記のCSSを指定することでヨコ・タテ中央配置することができます。
これで、画面中央に表示されているはずです。

画面中央ではなく、親要素の中央に要素を表示させたい場合には、要素の親要素に、position:static(初期値)以外のposition:relative;、potision:absolute;やposition:fixed;を指定してください。
その親要素を基準にヨコ・タテ中央配置になります。

サンプルではtop.left.right.bottomに0を指定していますが、これらの数値をいじっても問題はありません。
ただし、top.left.right.bottomの初期値はautoになっているため、これを解除するために指定しています。

そのため、topだけに80pxを指定するとタテ・ヨコ画面中央からタテのみ80px下に行く指定することも可能です。

margin:auto;をmargin:0 auto;にすれば、ヨコ方向のみ中央寄せにすることもできます

02.transform: translateで画面中央に配置するやり方

CSS

こちらはtransform:translateで配置する方法。

中央に配置したい要素に上記のCSSを指定することでヨコ・タテ中央配置することができます。
これで、画面中央に表示されているはずです。

画面中央ではなく、親要素の中央に要素を表示させたい場合には、要素の親要素に、position:static(初期値)意外のposition:relative;、potision:absolute;やposition:fixed;を指定してください。
その親要素を基準にヨコ・タテ中央配置になります。

position absolute 中央

position:absolute;でブラウザのタテ50%、ヨコ50%に要素を配置します。しかしそのままでは画像のようになってしまいます。
ブラウザの中央から要素が出てくるためです。

以前では中央にしたい要素の半分の値。例えば写真が500pxであれば、その半分250pxをネガティブマージンで差し引きすることで、中央にしていました。
margin-left:-250px; margin-top:-250px これで中央にしていました。

transform:translateも考え方は同じですが、わざわざ半分の値を計算しなくても-50%という指定だけで中央表示に出来ます。