CSSで要素を上下や左右に中央寄せする方法まとめ

今回はCSSで要素を上下や左右に中央寄せする方法をまとめてみました。

レスポンシブデザインにも対応できるのでかなり使えると思います。

 

左右に中央揃えする方法

1:text-align: center;

.sample {
  text-align: center;
}

中の画像やテキストを中央揃えにします。

基本的で使う場面が多いプロパティなので、しっかり使えるようにしておきたいですね。

 

2:margin: 0 auto;

.sample {
  width: 80%;
  margin: 0 auto;
}

中のブロック要素を中央揃えにします。

同時にwidthを指定する必要がありますが、%でも指定ができるのでレスポンシブデザインでも使いやすいですね。

また、縦のmarginは0にしてありますが、縦に任意のmarginを決めたいときは「margin: ○px auto」というように書けばokです。

 

3:display: inline-block;

.sample{
  text-align: center;
}
.sample-inner{
  display: inline-block;
  text-align: left;
}

子要素のwidthを決めることなく、親要素に対して中央揃えができます。

display: inline-block;によって、子要素は内容によってwidthが変わりますが、

 

上下左右に中央揃えする方法

4:vertical-align: middle;

.sample{
  display: table;
  width: 100%;
}
.sample-inner{
  display: table-cell;
  vertical-align: middle;
}

vertical-align: middle;を使うと上下に対して中央揃えにすることができます。

ただし、vertical-align: middle;が効くのはインライン要素かテーブルセルのどちらかです(ブロック要素には効かない)。なので親要素にはdisplay: table;、子要素にはdisplay: table-cell;を忘れずに指定しておきましょう。

 

5:position: absolute; + margin: auto;

.sample{
  position: relative;
}
.sample-inner{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 80%;
  height: 50%;
}

position: absolute;で絶対配置した要素を基準の要素に対して上下左右に中央揃えにすることができます。いざという時にかなり役立つので覚えておいて損は全くありません。

指定するときはtop、bottom、left、rightそれぞれに0を指定し、widthとheightも指定するようにしてください。

なぜこれで中央揃えになるのか?

→横方向に対する中央揃えを例に考えます。

position: absoluteで絶対配置になった要素の横方向では

  • left、width、rightが 「auto以外」である
  • margin-leftとmargin-rightが 「auto」 である

この条件が揃ったとき、「左右のmarginは等しい値になるよう計算されたものになる」という仕様があり、これを満たしたため中央揃えになっています。縦方向においても同じです。

つまり、topやleftが0になっているのが重要なのではなく、値をauto以外にすることで中央揃えになっていると言うことができます。

 

6:transform

.sample{
  position: relative;
}
.sample-inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

基準の要素に対してtopとleftをそれぞれ50%ずつ移動させ、中央揃えにしたい要素の50%をそれぞれ逆方向に戻します。

5の方法とは違って、ブロックの高さを指定しなくても中央揃えできる便利な指定方法です。

 

7:display: flex;

.sample{
  display: flex;
  justify-content: center;
  align-items: center;
}

親要素にこれを指定すると、子要素は上下左右に対して中央揃えになります。

justify-contentが横方向、align-itemsが縦方向を指定するプロパティです。

数ある中央揃えの指定でも特に条件などがないので、現状最強の中央揃え方法と言えます。困ったらとりあえずこれを指定すれば子要素が勝手に中央に揃ってくれます。

ただし、IE9以下には非対応なので、ここだけ注意してください。

 

まとめ

CSSで中央揃えにする方法を紹介しました。

なんだかんだ言って最後のdisplay: flex;が一番簡単だと思います。

フレックスボックスは概念が少し難しいですが、よくわからなくてもとりあえずあれを指定すれば上下左右に中央揃えになるので、ハイパー便利ですね。