CSSで要素を縦横中央配置するための方法まとめ

2016.01.05 Category:CSS, Tips Tag:CSS

CSSで要素を縦横中央配置する方法はいくつかあり、よく使われているのは、display:table;やネガティブマージンを使った方法だと思います。
今回は、そんないくつかある「縦横中央配置するための方法」をまとめました。

CSSで要素を縦横中央配置する方法

HTMLの方はだいたい同じようなものを書いていますが、CSSの書き方がどれも違う方法を使って縦横中央配置しています。

1.display:table;を使う

See the Pen BoxCenter - Table by mamigaku (@mamigaku) on CodePen.

display:table;を使い、縦方向は、vertical-align: middle;で中央へ、横方向は、text-align: center;で中央へ配置しています。

<section class="box">
  <p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</section>

<p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p>

</section>

.box {
  display: table; //要素をテーブル化
  width: 500px;
  height: 150px;
  background: #929090;
  margin: 0 auto 1em;
  padding: 1em;
  border-radius: .2em;
  color: white;
  font-size: .875em;
  text-align: center;　//横方向の中央配置
  line-height: 1.6;
}
.box> *{
  display: table-cell;
  vertical-align: middle; //縦方向の中央配置
}

.box {

display: table; //要素をテーブル化

width: 500px;

height: 150px;

background: #929090;

margin: 0 auto 1em;

padding: 1em;

border-radius: .2em;

color: white;

font-size: .875em;

text-align: center;　//横方向の中央配置

line-height: 1.6;

}

.box> *{

display: table-cell;

vertical-align: middle; //縦方向の中央配置

}

2.ネガティブマージンを使う

See the Pen BoxCenter - NegativeMargin by mamigaku (@mamigaku) on CodePen.

まずは、親要素に対して子要素が半分の位置にくるようにします。
あとは、子要素の横と高さの半分をネガティブマージンで指定します。

<section class="box">
  <p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</section>

<p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p>

</section>

.box{
  position: relative;
  width: 500px;
  height: 150px;
  background: #929090;
  margin: 0 auto 1em;
  padding: 1em;
  border-radius: .2em;
  color: white;
  font-size: .875em;
  text-align: center;
  line-height: 1.6;
}
.box p{
  width: 100%;
  position: absolute;
  top: 50%; //縦方向の半分へ
  left: 50%; //横方向の半分へ
  text-align: center;
  margin: -2em 0 0 -50%;　//縦横の大きさの半分をネガティブマージンする
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}

.box{

position: relative;

width: 500px;

height: 150px;

background: #929090;

margin: 0 auto 1em;

padding: 1em;

border-radius: .2em;

color: white;

font-size: .875em;

text-align: center;

line-height: 1.6;

}

.box p{

width: 100%;

position: absolute;

top: 50%; //縦方向の半分へ

left: 50%; //横方向の半分へ

text-align: center;

margin: -2em 0 0 -50%;　//縦横の大きさの半分をネガティブマージンする

color: #fff;

font-size: 14px;

line-height: 1.6;

}

3.display:inilne-block; (::before)を使う

See the Pen BoxCenter - InlineBlock_before by mamigaku (@mamigaku) on CodePen.

要素をinilne-blockし、縦方向をvertical-align: middle;で中央へ設置しています。
ただ、この方法、親要素の高さを取得していないと中央配置できないのが難点なところ。

<section class="box">
  <p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</section>

<p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p>

</section>

.box{
  display: blcok;
  width: 500px;
  height: 150px;
  background: #929090;
  margin: 0 auto 1em;
  padding: 1em;
  border-radius: .2em;
  color: white;
  font-size: .875em;
  text-align: center;
  line-height: 1.6;
}
.box > *{
  vertical-align: middle; // 縦方向の中央配置
  display: inline-block; //　子要素をinline-blockにする
}
.box::before{
  content: "";
  height: 100%; 
  vertical-align: middle; 
  width: 0px;
  display: inline-block;
}