【CSS】上下・左右の余白サイズを指定した中央揃えの例|calc関数
今回は、CSSで要素を中央揃えにする際に、余白のサイズを指定する例となります。
【CSS】上下左右の余白のサイズを指定した中央揃えの例
以下のCSSの例では、classにwrapを持つ要素を画面全体のサイズに指定し、その子要素の上下左右の余白サイズを40pxに指定して中央揃えとしています。また、子要素内も上下左右の中央揃えとしています。
See the Pen CSS centered by yic666kr (@yic666kr) on CodePen.
以下、中央揃えに関するCSSの説明となります。
calc関数で余白のサイズを指定
要素の余白サイズの指定するために、子要素のwidth・heightプロパティでcalc()を利用しています。
calc()はプロパティの値に利用できる関数となり、引数には演算子を組み合わせた1つの式を指定でき、その式の結果が値となります。
今回の例では、子要素に対して、それぞれ次のサイズをcalc()を利用して指定しています。
- widthは、画面全体の横幅から80pxを引いたサイズ
- heightは、画面全体の縦幅から80pxを引いたサイズ
上記のプロパティに加え、classにcontentを持つ要素は、Flexboxを利用して上下左右の中央揃えにしているため、それぞれ上下左右の余白サイズが40pxとなります。
要素のサイズを画面全体にする方法
要素のサイズを画面全体にできる単位のvw・vhについては、以下のリンク先を参考にしてみてください。
要素・要素内を上下左右の中央揃えにする方法
要素・要素内の上下左右の中央揃えはFlexboxを利用しています。詳しくは以下のリンク先を参考にしてみてください。