【CSS】コンテンツ(テキスト)の天地中央揃え方法まとめ

HTML/CSS

コンテンツ(テキスト)の天地中央揃え方法

今回紹介する方法
  • relative/absoluteを利用する方法
  • Flexbox化し、『align-items: center』を適用する方法
  • 上下に均等なpaddingを確保する方法
  • table-cell化し、『vertical-align: middle』を適用する方法
  • line-heightで高さを確保する方法

以下ではそれぞれの方法について紹介します。

relative/absoluteを利用する方法

親要素で囲み、親要素をposition: relative・コンテンツの要素をposition: absoluteとすることで天地中央揃えを実現する方法です。

absoluteとrelativeを利用した上下左右の中央よせ方法で紹介した通り、relative/absoluteを利用した中央よせには『marginプロパティを利用する方法』と『transformプロパティを利用する方法』の2つがあります。
このうちの『transformプロパティを利用する方法』を利用することで上下中央よせになります。具体例は以下の通りです。

<div class="container">
  <span class="item">item</span>
<div>


.container {
  position: relative;
  width: 200px;
  height: 100px;
  background: lightgreen;
}

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

See the Pen
inline-vertical-center-absolute by Toshiharu Nishina (@nishina555)
on CodePen.

なお、擬似要素before/afterを利用すると以下のように書き換えられます。擬似要素before/afterの詳細解説は擬似要素before/afterの概要と具体例で紹介しています。

<span class="item"></span>


.item {
  display: block;
  position: relative;
  width: 200px;
  height: 100px;
  background: lightgreen;
}

.item::after {
  content: 'item';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

See the Pen
Untitled by Toshiharu Nishina (@nishina555)
on CodePen.

Flexbox化し、『align-items: center』を適用する方法

display: flexを適用してコテンツをFlexアイテムにし、align-items: centerで天地中央揃えする方法です。具体例は以下の通りです。
なお、Flexboxの詳細解説はFlexboxの概要と使いどころで紹介しています。

<span class="item">item</span>


.item {
  display: flex;
  width: 200px;
  height: 100px;
  align-items: center;
  background: lightgreen;
}

See the Pen
inline-vertical-center-flexbox by Toshiharu Nishina (@nishina555)
on CodePen.

上下に均等なpaddingを確保する方法

上下に同じ幅のpaddingを持たせることでコンテンツを天地中央揃えにする方法です。

コンテンツの要素がブロックレベル要素の場合

<p class="item">item</p>


.item {
  width: 200px;
  padding: 45px 0;
  background: lightgreen;
}

See the Pen
block-vertical-center-padding by Toshiharu Nishina (@nishina555)
on CodePen.

コンテンツの要素がインライン要素の場合

インライン要素にdisplay: inline-blockを適用し、上下にpaddingを確保できるようにします。
ブロックレベル要素化できればよいので、displayの値はflexやblockでも問題ありません。

<span class="item">item</span>


.item {
  display: inline-block;
  width: 200px;
  padding: 45px 0;
  background: lightgreen;
}

See the Pen
inline-vertical-center-padding by Toshiharu Nishina (@nishina555)
on CodePen.

参考: 『要素の高さ = フォントサイズ + 上下padding』にするためには『line-height: 1』を追加する

上下paddingで要素の高さを確保する場合、『要素の高さ = テキストの高さ + 上下padding』となります。

テキストの高さは『フォントサイズ + 行間(テキスト上下の余白)』で構成されています。
line-height: 1を適用することで『行ボックスの高さ = フォントサイズ』となるため、テキストに行間がない状態になります。

その結果、『要素の高さ = フォントサイズ + 上下padding』という式が成立します。

line-height: 1を適用したケースと適用していないケースの違いは以下の通りです。

<div class="container">
  <span class="with-line-height">1</span>
</div>

<div class="container">
  <span>1</span>
</div>


.container {
  /* widthの初期値をコンテンツ幅にするため、Flexコンテナで囲み、Flexアイテム化している */
  display: flex;
  margin-bottom: 10px;
}

span {
  display: block;
  padding: 12px;
  background: lightgreen;
}

.with-line-height {
  line-height: 1;
}

See the Pen
line-height-example by Toshiharu Nishina (@nishina555)
on CodePen.

table-cell化し、『vertical-align: middle』を適用する方法

table-cellの要素に対してvertical-align: middleを適用すると天地中央揃えになる特性を利用した方法です。
親要素で囲み、親要素にdisplay: table・コンテンツの要素にdisplay: table-cellを適用させます。具体例は以下の通りです。

<div class="container">
  <span class="item">item</span>
</div>


.container {
  display: table;
}

.item {
  display: table-cell;
  width: 200px;
  height: 100px;
  vertical-align: middle;
  background: lightgreen;
}

See the Pen
inline-vertical-center-table-cell by Toshiharu Nishina (@nishina555)
on CodePen.

line-heightで高さを確保する方法

line-heightで高さの確保とコンテンツの天地中央揃えを実現する方法です。
なお、コンテンツの行が増えるごとにline-heightによる高さが追加されるので注意が必要です。

コンテンツの要素がブロックレベル要素の場合

<p class="item">item</p>


.item {
  width: 200px;
  line-height: 100px;
  background: lightgreen;
}

See the Pen
block-vertical-center-line-height by Toshiharu Nishina (@nishina555)
on CodePen.

コンテンツの要素がインライン要素の場合

インライン要素にdisplay: inline-blockを適用し、line-heightで高さの指定ができるようにします。
ブロックレベル要素化できればよいので、displayの値はflexやblockでも問題ありません。

<span class="item">item</span>


.item {
  display: inline-block;
  width: 200px;
  line-height: 100px;
  background: lightgreen;
}

See the Pen
inline-vertical-center-line-height by Toshiharu Nishina (@nishina555)
on CodePen.

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考資料

RECOMMEND