CSSで上下左右中央寄せ

公開: 2014-05-29 19:19
更新: 2016-04-29 06:02

追記(2014-09-19 14:35)こちらの方法の方が簡単です。
⇒ CSSで上下左右中央寄せににする方法




今日は1年ぶりくらいにバスに乗りました。

料金を先に払うのか後に払うのかわからず、
ドキドキしながらおじさんの後ろで様子を見ていました。

都内はだいたい先払いらしいです。
バスは景色が流れて楽しい。


さてさて、
CSSで上下左右中央に並べる方法です。


はじめはこんな状態。
HTML
<div id="wrapper">
        <div id="box"></div>
</div>
CSS
#wrapper {
        width: 270px;
        height: 200px;
}
#box {
        width: 90px;
        height: 90px;
}


子要素(#box)を親要素(#wrapper)の上下左右中央に持って行きます。
HTML
<div id="wrapper">
        <div id="box"></div>
</div>
CSS
#wrapper {
        width: 270px;
        height: 200px;
        position: relative;
}
#box {
        width: 90px;
        height: 90px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -45px;
        margin-left: -45px;
}
まず親要素(#wrapper)のpositionをstatic以外のものにします。
absoluteやfixedを指定していなければ、relativeを渡せばOKです。

そして子要素(#box)の方はpositionをabsoluteにします。
これで親要素の左上が座標(0,0)の原点になるので、まずtopとleftに50%を渡します。
するとこのように子要素の左上が親要素の中央に来ます。
あとは子要素の横幅、高さの半分をマイナスしてあげるだけです。
この場合は縦横90pxなので、margin-top, margin-leftに-45pxを渡します。
すると中央になりますね♪


よく使うテクニックです。
ではでは♪

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

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