WEBデザイナーらしくコーディングのこともかいてみようと思います！
今回はposition:absolute;で中央に配置するやり方を2種類ご紹介します。
どちらを使っても得られる結果は同じですが、知っているだけで応用がきいたりするので両方ご紹介します！
01.margin:autoで画面中央に配置するやり方
CSS
1 2 3 4 5 6 7 8 | position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:好きな値; height:好きな値; |
中央に配置したい要素に上記の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
1 2 3 4 5 6 7 8 9 10 | position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width:好きな値; height:好きな値; |
こちらはtransform:translateで配置する方法。
中央に配置したい要素に上記のCSSを指定することでヨコ・タテ中央配置することができます。
これで、画面中央に表示されているはずです。
画面中央ではなく、親要素の中央に要素を表示させたい場合には、要素の親要素に、position:static(初期値)意外のposition:relative;、potision:absolute;やposition:fixed;を指定してください。
その親要素を基準にヨコ・タテ中央配置になります。
position:absolute;でブラウザのタテ50%、ヨコ50%に要素を配置します。しかしそのままでは画像のようになってしまいます。
ブラウザの中央から要素が出てくるためです。
以前では中央にしたい要素の半分の値。例えば写真が500pxであれば、その半分250pxをネガティブマージンで差し引きすることで、中央にしていました。
margin-left:-250px; margin-top:-250px これで中央にしていました。
transform:translateも考え方は同じですが、わざわざ半分の値を計算しなくても-50%という指定だけで中央表示に出来ます。