paddingとcalcでブロックのセンタリング
セクションごとに横幅いっぱいの背景色がコロコロ変わるサイトを見てて、divの数が増えそうでやだなーと思ってたところでふと思いついたのでメモ。
margin: 0 auto;でセンタリング(よくある方法)
.wrap {
width: 1000px;
margin: 0 auto;
}paddingとcalcでセンタリング
.wrap {
width: 100%;
padding: 0 calc(50% - 500px);
box-sizing: border-box;
}
メリット
横幅いっぱいがセクションやブロックの領域になり、backgroundをあてることができるので、ブロックのネストを少なくできるケースがある。昨今のダイナミックなデザインには構造的にしっくりくることが多い気がする。
デメリット
calcの段階でピクセルに端数が出てしまい、ぴったり1000pxにならない。もしかしたら致命的かもしれない。 [2018/10 追記]ちゃんと計算してくれるぽい。普通に使える。
あとデメリットというほどではないけど、直接の子要素にposition: absolute;をあてる時に計算が少し複雑になる、と思う。ひとつブロックを挟んでやれば解決だけど、構造的意味のないdivが必ず必要になるような場合は、そもそも従来の方法(margin: 0 auto;)でやればいいと思う。
