CSSの値はcalc()で簡単計算指定できる!

cssで値がpxなどで固定されているモノならば必要ありませんが、
%で可変されているモノの子を指定した所に表示させたい時などに、
calc()を使うととても便利!!

calc()の使い方

<div>
  <span></span>
</div>

div{
  background: #eee;
  width: 50vw;
  height: 200px;
}
div > span{
  display: inline-block;
  background: #666;
  width: 50px;
  height: 50px;
  margin-top: calc(200px / 2 - 25px);
  margin-left: calc(50vw / 2 - 25px);
}

親要素のdiv( 50vw ×200px)の中央に子要素のspan(50px×50px)を中央に配置したい。

その際、divはウィンドウ幅に合わせて可変するので、子要素の位置も可変し、ずっと中央に配置させる。

50vwと言うと、ウィンドウ幅を100%とした際の50%の値。

これの中央を計算するとなると、ウィンドウ幅が変わるまいに計算する必要がある。
固定で値を指定する事は難しい

そんな時にcalc()を使って簡単な計算をさせると、あっと言うまに解決する。

margin-left: calc(50vw / 2 – 25px);
→ margin-left: calc(divの幅の半分の値 – spanの幅の半分の値);

※四則演算は半角スペースで必ず空ける事!

「spanの幅の半分の値」で引いて配置の起点が左上にある事を考えると、

 

半角スペース入れないと計算されないよ!