CSSでパーセント指定の要素を天地左右中央に表示する方法

2016.01.31

CSSでパーセント指定された要素を天地左右中央に表示する方法を紹介します。

幅や高さが決まっている要素ならば簡単に配置できますが、最近はレスポンシブ対応のため、幅や高さが決まっていない要素を上下中央に配置することが増えてきました。

今回はCSSで「transform: translate(-50%, -50%);」を使って幅や高さが決まっていない要素を上下中央表示する方法を紹介します。

スクリーンショット 2016-01-31 14.00.58
Centering Percentage Width/Height Elements | CSS-Tricks

天地中央に表示する方法

デモページを用意しました。

スクリーンショット 2016-01-31 14.05.13

HTMLを用意します。赤い箱のdiv(class=”container”)を天地中央に表示して、その中のテキストが入ったdiv(class=”descrpition”)も天地中央に表示します。

<body>
  <div class="container">
  <div class="description">CSSで中央寄せ</div>
  </div>
</body>

CSSはこんな感じです。

body {
  /*装飾*/
  background: #900;
}
div.container {
  /*要素を上下中央に表示*/
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari */
  transform: translate(-50%, -50%);
  
  /*要素のサイズ*/
  width: 40%;
  height: 50%;
  
  /*装飾*/
  padding: 20px; 
  background: red;
  color: white;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
div.description {
  /*要素を上下中央に表示*/
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari */
  transform: translate(-50%, -50%);
  
  /*要素のサイズ*/
  width: 100%;
  
  /*装飾*/
  font-size: 24px;
}

ポイントはtransformでネガティブマージンを指定することです。

/*要素を上下中央に表示*/
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

ちなみに、単純なネガティブマージンでは動作しません。

/*これだと上手くいかない!!*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -25%;
margin-top: -25%;