要素のpaddingを可変にしてセンタリングする
基本的にコンテンツのセンタリングはmarginで行っていたけど、
「absoluteで展開した幅100%の要素の中に、さらにコンテンツをセンタリングして配置したい」といったとき、わざわざ入れ子にするのは面倒くさい。
そういう時はcalc関数を使って、左右のpaddingを可変にすると手数が少なくてすんだ。むやみにhtmlも入れ子にしないですむ。
具体的には
padding: 上 calc( ( 100% - コンテンツ幅(px) ) / 2 ) 下;
でウインドウ幅に関係なく、コンテンツの中央配置を、左右のpaddingで行える。
absoluteの要素で幅がおかしかったら100vwの方がいいかもしれない。
安易に、入れ子にした要素へwidth: ---px; margin: 0 auto;とか設定するのも面倒だし、
幅100%のメガメニューを展開したときとかに使うと地味に捗る。
あとはコンテンツエリアに背景色が違うセクションを交互に並べる時とか、セクションをmarginでセンタリングしていたがこれなら入れ子も一つ減らせる。
