【CSS】 要素を「上下左右（縦横）」の中央に配置する6つの方法

こんにちは、さち です。

サイトを作っているとブチ当たるのが、テキストや画像などの要素を「上下左右（縦横）」の中央に配置するには HTML・CSS をどう書けばいいのか問題。

左右中央は text-align: center; でだいたい間に合うんですが、上下中央にはそのような万能な CSS プロパティがありません……。

解決方法は複数あって、それぞれに長所・短所（メリット・デメリット）があります。どの方法を使うかは状況次第です。

そこで今回は、要素を「上下左右」の中央に配置する方法についてまとめていきます。（備忘録です）

【方法1】 「line-height」を使う方法

サンプルコード

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

<div class="parent">
  <img src="sample.png">
</div>

.parent {
  height: 150px;
  line-height: 150px;
  text-align: center;
}

height と line-height を同じ値にすることで上下中央に配置します。

結果

テキスト

「テキスト」は上手くいきますが、「画像」は上にズレてしまう場合があります。

また、line-height の値が大きいため、「テキスト」の場合でも2行以上になると崩れます。（行間が広すぎる）

【方法2】 「position」を使う方法

サンプルコード

<div class="parent">
  <span class="child">テキスト</span>
</div>

<div class="parent">
  <img class="child" src="sample.png">
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

子要素の top left right bottom の値を 0 にして、さらに margin: auto; にすることで、上下左右を中央に配置します。

使用するプロパティの数が多く、記述量が多いのが少し面倒かも。

結果

テキスト

「画像」は上手くいきますが、「テキスト」には効果がありません。

【方法3】 「transform」を使う方法

サンプルコード

<div class="parent">
  <span class="child">テキスト</span>
</div>

<div class="parent">
  <img class="child" src="sample.png">
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

子要素の top left を 50% にすることで、「子要素」の左上角が「親要素」の中心に移動します。

さらに、transform: translate(-50%, -50%); で「子要素」の位置を自分の大きさの半分だけ戻すことで、上下左右の中央に配置します。

transform プロパティを使わずに translate: -50% -50%; という書き方もできますが、対応ブラウザが比較的新しいものに限られるので注意して下さい。

結果

テキスト

「テキスト」「画像」どちらも上手くいきます。

【方法4】 「flex」を使う方法

サンプルコード

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

<div class="parent">
  <img src="sample.png">
</div>

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

display: flex; にすることで使用できる align-items で上下中央に、justify-content で左右中央に配置します。

結果

テキスト

「テキスト」「画像」どちらも上手くいきます。

【方法5】 「grid」を使う方法

サンプルコード

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

<div class="parent">
  <img src="sample.png">
</div>

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

display: grid; にすることで使用できる place-items で上下左右の中央に配置します。

また、place-items: start center; のように「値」を2つ持つこともでき、「上下」「左右」の位置を別々に指定することもできます。

place-items: start center; は別のプロパティを使って、align-items: start;（上下の位置）、justify-items: center;（左右の位置）と分けて書くことも可能です。

結果

テキスト

「テキスト」「画像」どちらも上手くいきます。

【方法6】 「table-cell」を使う方法

サンプルコード

<div class="parent">
  <span class="child">テキスト</span>
</div>

<div class="parent">
  <span class="child"><img src="sample.png"></span>
</div>

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<table> タグの中では vertical-align: middle; を使って上下中央に配置できます。

<table> 以外のタグでも、親要素に display: table; 、子要素に display: table-cell; を設定することで vertical-align: middle; が使えるようになります。

結果

テキスト

「テキスト」「画像」どちらも上手くいきます。

「flex」「grid」を使う方法の注意点

改行位置を指定したいときに、CSS の word-break: keep-all; overflow-wrap: break-word; と HTML の <wbr> を使う方法があります。

しかし、この方法は display: flex; と display: grid; の要素では上手く動きません。

つまり、前述の「flex」「grid」を使う方法とは併用できません。注意して下さい。