HOME > 開発者向けBLOG > Webデザイン >  内容全体を上下中央の真ん中に設置

Technology Note 開発者向けBLOG

Webデザイン

内容全体を上下中央の真ん中に設置

こんにちは、ゼノフィ渡部です。

CSSだけで全体を上下中央に表示する方法をご紹介いたします。

全体のdivに「position: absolute;」で絶対位置の指定をし、topとbottomに「50%」、マージンでは幅と高さの半分の値をマイナス指定します。もしこの時、パディングの指定がある場合は、パディングの領域も含めた値を指定します。

1
2
3
4
5
6
7
8
9

div.container {
  position: absolute; /* 絶対指定 */
  top: 50%;  /* 上の要素を中央配置 */
  left: 50%; /* 左右の要素を中央配置 */
  width: 800px;
  height: 400px;
  margin: -200px 0 0 -400px; /* 幅、高さの半分をマイナス指定 */
  background: #EFEFEF;
}

全体の要素である「<div class="container">」が記述されています。

1
2
3

<div class="container">
    テキスト
</div>

サンプル

CSS

1
2
3
4
5
6
7
8
9

div.container {
  position: absolute; /* 絶対指定 */
  top: 50%;  /* 上の要素を中央配置 */
  left: 50%; /* 左右の要素を中央配置 */
  width: 800px;
  height: 400px;
  margin: -200px 0 0 -400px; /* 幅、高さの半分をマイナス指定 */
  background: #EFEFEF;
}

HTML

1
2
3

<div class="container">
    テキスト
</div>

<

>

PAGETOP