【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を利用しています。詳しくは以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。