【Old Log】CSSで横方向真ん中に配置する




この情報は三年以上前の古い情報です。

CSSで横方向真ん中に配置する方法です。これもスタンダードな方法だと思いますが、毎回忘れて、調べ直すという無駄な作業が多いので、先日作成したCSSをメモとしてのこしておこうと思います。方法はいろいろあると思いますが、今回は「position」を使用したサンプル。

CSS

#hoge{
width:40px;
height:40px;
position:absolute; top:0px; left:50%;
margin-left:-20px;
z-index:100;
}

仮にwidth:40px; height:40px;のボックスがあるとします。
position:absolute;で絶対配置
left:50%;で真ん中に
width:40px;の半分20px;を戻す。
margin-left: -20px;

以上