「calc()」の利点


pxや、%, em, rem, vw, vhなどの相対単位を使っても、
異なる単位間で計算することができる「calc()」での使用法です。

「calc()」は2つの利点があります。
1.異なる単位で計算することが可能です。例えば、相対単位(vw, vhや%),
絶対単位(px)を組み合わせることができます。
2.ブラウザでの値が動的になり、ビューポートの変更に合わせて適応できます。

calc()」の実装例: 要素のセンタリング

要素をボックス内で上下左右、中央にセンタリングすることができます。

上記の例では縦、横ともに100pxのボックスの場合上下中央の配置となります。