CSS calc関数を利用して枠をページ中央に配置する

CSSのcalc関数を利用して枠をページ中央に配置するコードを紹介します。

概要

枠をページの中央に配置する方法はいくつかありますが、この記事ではcalc関数を利用してページの中央に枠を配置する方法を紹介します。

実装例

コード

以下のHTML,CSSファイルを作成します。

calc-centering.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="calc-centering.css"/>
</head>
<body>
  <h1>calc関数を利用したセンタリング</h1>

  <div class="CenterFrameOuter">
    <div class="CenterFrame">
      <p>コンテンツの枠です。</p>
    </div>
  </div>
</body>
</html>

calc-centering.css

body {
  background-color:#E0E0E0;
}

.CenterFrameOuter {
  padding-left: calc(50% - 400px);
  padding-right: calc(50% - 400px);
}

.CenterFrame {
  border: 1px solid #ff6a00;
  background-color: #FFFFFF;
}

解説

divを2段にします。外側の枠で、paddingを設定し、内側の枠を中央に表示されるようにします。

  <div class="CenterFrameOuter">
    <div class="CenterFrame">
      <p>コンテンツの枠です。</p>
    </div>
  </div>

CSSの設定が以下です。外側の枠は、ページの幅から400px引いた値をパディングに設定し、左右の余白にします。
ページの幅が広い場合は、内側は800pxの枠幅になります。ウィンドウ幅が狭まると、左右の余白も少なくなります。ウィンドウ幅が800px以下になると、calcの値は0になるため、左右の余白がなくなります。内側の枠には幅が設定されていないため、ウィンドウの幅に合わせた幅になり、横スクロールバーが表示されない動作になります。
内側の枠には、オレンジ色の枠線を描画します。

.CenterFrameOuter {
  padding-left: calc(50% - 400px);
  padding-right: calc(50% - 400px);
}

.CenterFrame {
  border: 1px solid #ff6a00;
  background-color: #FFFFFF;
}