【css】なかの要素をcssで上下左右中央にしたい！

なかの要素を上下左右を中央にしたいという要望ってよくあると思います。

上下左右を中央にする方法はいくつかあります。

cssで上下左右中央にする方法

flexを使う

1つ目はflexを使う方法です。

下記の3つのcssを使うことで簡単に上下左右を中央にすることができます。

display: flex;

align-items: center;
justify-content: center;

html

<div class="box box0">
アイテム1です。アイテム1です。<br>アイテム2です。<br>アイテム3です。アイテム3です。
</div>

css

.box0{
  display: flex;

  align-items: center;
  justify-content: center;
}

サンプル

子要素に複数の要素がある場合

html

たとえば子要素にタグが複数ある場合はflexをかける下記のようになります。

<div class="box box1">
	<div class="item1">アイテム1です。アイテム1です。</div>
	<div class="item2">アイテム2です。</div>
	<div class="item3">アイテム3です。アイテム3です。</div>
</div>

サンプル

そうした場合は子要素をタグで囲ってあげます。

html

<div class="box box1">
	<div class="inner">
		<div class="item1">アイテム1です。アイテム1です。</div>
		<div class="item2">アイテム2です。</div>
		<div class="item3">アイテム3です。アイテム3です。</div>
	</div>
</div>

サンプル

gridを使う

2つ目はgridを使う方法です。

html

<div class="box box2">
	<div class="inner">
		<div class="item1">アイテム1です。アイテム1です。</div>
		<div class="item2">アイテム2です。</div>
		<div class="item3">アイテム3です。アイテム3です。</div>
	</div>
</div>

css

下記の2つを使うことで上下左右が中央になるのでさきほどのflexより少ない記述で書けますね。

.box2{
  display: grid;
  place-items: center;
}

サンプル

transformを使う

html

<div class="box box3">
	<div class="inner">
		<div class="item1">アイテム1です。アイテム1です。</div>
		<div class="item2">アイテム2です。</div>
		<div class="item3">アイテム3です。アイテム3です。</div>
    	</div>
</div>

css

下記は要素の上から50%、左から50%に移動させて要素の大きさの半分を戻す方法になります。

.box3{position: relative;}
.box3 .inner{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  transform: translateY(-50%) translateX(-50%);
}

サンプル