こんにちは、くしだです。
See the Pen
Untitled by kushi (@kushi95)
on CodePen.
このように円を親要素の真ん中に配置することがたまにあります。
上記のものは幅が固定なので位置の指定も楽なのですが、
これをレスポンシブ対応させるときに計算が必要になってくることがあります。
同じような状況になったときなかなか真ん中にいかなくて苦労した方もいるのではないでしょうか。
そういうとき私は大好きなcalc()関数を使っております。
See the Pen
Untitled by kushi (@kushi95)
on CodePen.
これは画面幅の半分のサイズの円を真ん中に配置してます。
背景色が黄色なのが.content、グレーなのが.content_innerです。
.contentが左右に50pxずつパディングを持っていて、円の親要素である.content_innerが.contentに対して90%の幅を持っているので、少し計算が面倒です。
まず.content_innerの幅を計算し、そこから円の幅を引いて2で割ったものをleftの値にして真ん中に配置してます。
その式がこちらです。
left: calc((((100vw – 100px) * 0.9) – 50vw) / 2 );
難しいレスポンシブの際calc()関数は大変重宝しております。