HOME > > > CSSの「position:absolute」を使った時に真ん中に寄せる方法

CSSの「position:absolute」を使った時に真ん中に寄せる方法

absolute

absoluteを使うとtext-alignだと真ん中に寄らない

cssのabsoluteを使うとdivで囲っている部分を画像に重ねたり自由にレイアウトできます。
そのabsoluteで設定したdivを真ん中にしたい場合。。。marginやpaddingの数値設定でも真ん中に寄っている様には見えますが、正確じゃありません。windowsとmac、またブラウザの種類によって多少変わってきます。
そこで、absoluteを使った時、%設定で真ん中に寄せてしまいましょう。

サンプルはこちら

HTML

このHTMLでは「box」にabsoluteをかけます。
「mainbox」はrelativeをかけるだけなので、ここでは特別無くても良いです。


<div class="mainbox">
 <div class="box">真ん中に寄ります</div>
</div>

CSS

「box」にabsoluteを設定します。
absoluteを真ん中に寄せる場合は以下の通り。

width=absoluteを設定する横幅
left=50%
margin-left=-(absoluteを設定する横幅/2)

数値はなんでも構いません。
全体の横幅に対し半分の数値を設定するといった感じです。


.mainbox{
 position: relative;
}

.box{
 width: 200px;
 position: absolute;
 left: 50%;
 margin-left: -100px;
}

ここでは「width:200px」に対して「margin-left: -100px」を設定しています。

設定完了

absoluteを使った場合のセンター寄せでした。
寄らないのを解っていてtext-alignでアレ?アレ?ってなるもんでした。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.05.25