cssでテキストを上下中央配置｜テキストを真ん中に！

ウェブページを作っていると、テキストを上下中央に配置したい場面ってありますよね。
実は、CSSを使って簡単に実現できちゃうんです！今回は、初心者でもわかりやすく、コード例を交えながら解説していきます。

1. 高さを使って中央配置する

一番シンプルな方法は、要素の高さを指定して中央に配置する方法です。

CSS

.text-center {
  display: flex; /* 要素をフレックスボックスレイアウトにする */
  align-items: center; /* 垂直方向に中央揃えにする */
  height: 200px; /* 要素の高さを100%Viewport Heightにする */
}

.text-center p {
  margin: 0 auto; /* 左右に余白を自動的に設定する */
}

このコード例では、.text-center クラスに以下のスタイルを適用しています。

display: flex;

align-items: center;

height: 200px;

そして、.text-center p には margin: 0 auto; を設定することで、左右に余白を自動的に設定しています。

2. flexboxを使って中央配置する

flexboxを使って中央配置する方法もあります。

CSS

.text-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.text-center p {
  margin: 0; /* 余白を0にする */
}

このコード例では、.text-center クラスに以下のスタイルを適用しています。

display: flex;

align-items: center;

justify-content: center;

height: 200px;

そして、.text-center p には margin: 0; を設定することで、余白を0にしています。

3. table-layoutを使って中央配置する

table-layoutを使って中央配置する方法もあります。

CSS

.text-center {
  display: table;
  width: 100%;
  height: 200px;
}

.text-center p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  margin: 0 auto;
}

このコード例では、.text-center クラスに以下のスタイルを適用しています。

display: table;

height: 200px;

そして、.text-center p には display: table-cell; と vertical-align: middle; を設定することで、垂直方向に中央揃えにします。さらに、margin: 0 auto; を設定することで、左右に余白を自動的に設定しています。

まとめ

今回は、CSSでテキストを上下中央に配置する方法を3つ紹介しました。それぞれメリット・デメリットがあるので、状況に合わせて使い分けるのがおすすめです。