2017年10月5日木曜日

positionabsolute で中央に配置するやり方


positionabsolute で中央に配置するやり方  YouKnow.jp
CSS
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;にすれば、ヨコ方向のみ中央寄せにすることもできます

YouKnow.jp
http://youknow.jp/web/css-position

0 件のコメント:

コメントを投稿