CSSで上下左右中央寄せにする方法

公開: 2014-09-19 14:35
更新: 2016-04-29 06:02

こちらのブログで紹介されていた方法
⇒ CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。



最初はこんな状態です。

HTML
<div id="wrapper">
        <div id="box"></div>
</div>
CSS
#wrapper {
        width: 270px;
        height: 200px;
}
#box {
        width: 90px;
        height: 90px;
}

それをこう

CSS
#wrapper {
        width: 270px;
        height: 200px;
        position: relative;
}
#box {
        width: 90px;
        height: 90px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}

親要素(#wrapper)のpositionをrelativeかabsoluteにし、
中央に寄せたい子要素(#box)のpositionをabsoluteにします。


あとは子要素(#box)のtop,right,bottom,leftを0にしてmarginをautoにすれば完了。



こんな方法があるとは気づきませんでした。
任意のサイズで使用できるのでとっても便利ですね。
IE8以上&その他の主要ブラウザで使用しても大丈夫です。

今度からはこれを使おう
ではでは


この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。