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

この記事は約8分で読めます。
記事内に広告が含まれています

コーディングのイメージ

こんにちは、さち です。

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

左右中央は 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;
}

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

結果

サンプル
テキスト

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

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

  • 簡単な CSS しか使わない
  • 記述量が少ない
  • 「画像」だとズレる
  • 「テキスト」も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; にすることで、上下左右を中央に配置します。

結果

サンプル
テキスト

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

  • 簡単な CSS しか使わない
  • 「テキスト」には効果がない

【方法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%); で子要素の位置を自分の大きさの半分だけ戻すことで、上下左右の中央に配置します。

結果

サンプル
テキスト

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

  • 「テキスト」「画像」どちらでもOK
  • やっていることが回りくどい
  • 「テキスト」は要素で囲む必要がある
  • transform translate の使い方が覚えづらい

【方法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 で左右中央に配置します。

結果

サンプル
テキスト

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

  • 「テキスト」「画像」どちらでもOK
  • 記述量が少ない
  • align-itemsjustify-content が覚えづらい
  • display: grid; を使う方法と混同しやすい

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

サンプルコード

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

<div class="parent">
  <img src="sample.png">
</div>
.parent {
  display: grid;
  place-items: center;
}

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

結果

サンプル
テキスト

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

  • 「テキスト」「画像」どちらでもOK
  • 記述量が少ない
  • place-items が覚えづらい
  • display: flex; を使う方法と混同しやすい

【方法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; が使えるようになります。

結果

サンプル
テキスト

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

  • 「テキスト」「画像」どちらでもOK
  • 親要素が display: table; でないといけない
  • 「テキスト」も「画像」も要素で囲む必要がある

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

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

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

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

コメント

タイトルとURLをコピーしました