css 中央寄せ できない

CSSで垂直センタリングを実現する10の方法

CSSで垂直センタリングを実現する10の方法

この文章では、CSSを使って要素を垂直センタリングする10の方法について詳しく解説します。line-height、vertical-align、display:table-cell、Flexbox、Grid、絶対配置、transform、margin: auto、writing-mode、疑似要素など、さまざまな方法とそのコード例、適用シーンを紹介します。これを読めば、様々な垂直センタリングを簡単に実現できるようになります。

1. 方法一：line-heightを使って単一行テキストを垂直センタリング

line-heightの値をコンテナの高さと同じに設定することで、単一行テキストを垂直センタリングできます。 


<div class="container">
  <p>センタリングしたいテキスト</p>
</div>


.container {
  height: 100px; /* コンテナの高さ */
  line-height: 100px; /* コンテナの高さと同じ値を設定 */
}

2. 方法二：vertical-alignを使ってインライン要素を垂直センタリング

親要素をinline-blockまたはinlineに設定し、子要素にvertical-align: middle;を設定することで、インライン要素を垂直センタリングできます。 


<span class="container">
  <img src="example.jpg" alt="画像">
</span>


.container {
  display: inline-block;
}

.container img {
  vertical-align: middle;
}

3. 方法三：display: table-cellを使って複数行テキストを垂直センタリング

親要素をdisplay: table-cell;に設定し、vertical-align: middle;を設定することで、複数行テキストを垂直センタリングできます。 


<div class="container">
  <p>複数行のテキストを
垂直センタリングしたい場合</p>
</div>


.container {
  display: table-cell;
  vertical-align: middle;
  height: 100px; /* 高さを指定する必要がある */
}

4. 方法四：Flexboxを使って垂直センタリング

親要素をdisplay: flex;に設定し、align-items: center;を設定することで、様々なシーンで垂直センタリングを実現できます。 


<div class="container">
  <div class="item">センタリングしたい要素</div>
</div>


.container {
  display: flex;
  align-items: center;
  height: 100px; /* 高さを指定する必要がある */
}

5. 方法五：Gridレイアウトを使って垂直センタリング

親要素をdisplay: grid;に設定し、align-items: center;を設定することで、様々なシーンで垂直センタリングを実現できます。 


<div class="container">
  <div class="item">センタリングしたい要素</div>
</div>


.container {
  display: grid;
  align-items: center;
  height: 100px; /* 高さを指定する必要がある */
}

6. 方法六：絶対配置と負のmarginを使って垂直センタリング

子要素を絶対配置にし、top: 50%;とtransform: translateY(-50%);を使うことで、高さが分かっている要素を垂直センタリングできます。 


<div class="container">
  <div class="item">センタリングしたい要素</div>
</div>


.container {
  position: relative;
  height: 100px; /* 高さを指定する必要がある */
}

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

7. 方法七：絶対配置とmargin: autoを使って垂直センタリング

子要素を絶対配置にし、top、right、bottom、leftを0に設定し、margin: auto;を設定することで、高さが分かっている要素を垂直センタリングできます。 


<div class="container">
  <div class="item">センタリングしたい要素</div>
</div>


.container {
  position: relative;
  height: 100px; /* 高さを指定する必要がある */
}

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

8. 方法八：writing-modeとtext-alignを使って垂直センタリング

親要素にwriting-mode: vertical-lr;またはvertical-rl;を設定し、子要素にtext-align: center;を設定することで、単一行テキストを垂直センタリングできます。 


<div class="container">
  <p>センタリングしたいテキスト</p>
</div>


.container {
  writing-mode: vertical-lr;
  height: 100px; /* 高さを指定する必要がある */
}

.container p {
  text-align: center;
}

9. 方法九：疑似要素を使って垂直センタリング

::beforeまたは::after疑似要素を使い、display: inline-block;、vertical-align: middle;、height: 100%;を設定することで、単一行テキストを垂直センタリングできます。 


<div class="container">
  <p>センタリングしたいテキスト</p>
</div>


.container::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.container p {
  display: inline-block;
  vertical-align: middle;
}

10. 方法十：JSを使って垂直センタリング

JavaScriptを使って要素の高さと位置を動的に計算することで、動的に調整する必要がある場合に垂直センタリングを実現できます。 


<div class="container">
  <div class="item">センタリングしたい要素</div>
</div>


// JavaScriptのコードは省略

まとめ

この記事では、CSSで要素を垂直センタリングする10の方法を紹介しました。状況に応じて最適な方法を選択し、思い通りのレイアウトを実現してください。

参考資料

CSS垂直センタリングに関するQ&A

質問 回答
要素の高さがわからない場合、どのように垂直センタリングすればよいですか？ transform: translateY(-50%)と組み合わせて、親要素の高さを指定するか、JavaScriptを使って要素の高さを取得し、動的にセンタリング位置を調整する方法があります。
FlexboxとGrid、どちらの方法を使うべきですか？ Flexboxは一次元のレイアウト、Gridは二次元のレイアウトに適しています。状況に応じて使い分けましょう。
Internet Explorerに対応するには、どの方法が最適ですか？ Internet Explorerのバージョンによってサポート状況が異なります。古いバージョンに対応する必要がある場合は、display: table-cell;やJavaScriptを使う方法が有効です。

その他の参考記事:CSS の位​​置