テキストを上下中央寄せしたい時に使っているCSS設定5パターン

はじめに

Webサイト内のテキストを上下左右中央に配置したい、というケースは多いと思います。私の場合は、特にナビゲーションメニューやボタンを作る時に利用する頻度が高いです。

ひとくちに中央配置(中央寄せ)といっても、いくつか方法がありますので、ボタンを作成を例に、実際に私が行っているCSS設定を紹介します。

上から紹介する順に私の使用頻度が高い方法が並んでいます。それぞれメリット・デメリットがありますので、私は状況に応じて使い分けています。

目次

text-align:centerとline-heigtによる設定

左右の中央寄せをtext-align:centerで行い、line-heightで上下の中央寄せを行います。

ボタンの縦幅とline-height(行間)のサイズを同じにする事で、縦方向の中央にテキストを配置することができます。

HTML

<a href="#" class="example1">button</a>

CSS

.example1 {
 display: inline-block;
 width:200px;
 height:60px;
 line-height: 60px;
 background: #338DC9;
 color: #eee;
 text-align: center;
 text-decoration: none;
}

できあがったもの

個人的にはhtml、css共に一番シンプルで分かりやすい記述で、ボタンが1行の時にはよく使用しています。

非常に使いやすい記述なのですが、ボタンの縦幅 = 1行の縦幅となるため、テキストが2行以上になるとレイアウトが崩れます。

現象の再現(2行の時)

行間が広がるため、2行目のテキストがボタンの下に配置されてしまいます。

CSSのheightを削除しても良いのですが、いずれにしても1行の高さが大きくなりすぎるので、複数行の場合には使用できません。

デメリット

  • テキストが複数行の場合は使用できない

display:flexを使用する場合

文章などテキストが2行以上続く場合は、display:flexを使用して、左右の中央寄せをjustify-content: centerで行い、align-items: center;で上下の中央寄せを行っています。

恐らく一番スタンダードな方法じゃないでしょうか。

HTML

<a href="#" class="example2">button</a>

CSS

.example2 {
 display:flex;
 align-items: center;
 justify-content: center;
 width:200px;
 height:60px;
 background: #338DC9;
 color: #eee;
 text-decoration: none;
}

できあがったもの

この方法だと、テキストが2行になっても崩れずに配置されます。

現象の再現(2行の時)

上記CSSでは割愛していますが、flexboxを使用する場合はベンダープレフィックスが必要になります。

その他、デメリットを挙げるとすれば以下のとおりです。

デメリット

  • ベンダープレフィックスを含めるとCSS記述が長くなりがち
  • 隣接する要素のレイアウトに影響することがある

transformを使用する場合

ボタンの入れ子で子要素を作り、transformを設定することで縦横方向に移動させる方法です。

position: absoluteで位置を絶対値指定した上でtop:50%left:50%を指定します。

入れ子自身の大きさだけ右下方向にズレますのでtransform: translateX(-50%) translateY(-50%)でズレを調整します。

HTML

<a href="#" class="example3"><span>button</span></a>
.example3 {
 position: relative;
 display: inline-block;
 width:200px;
 height:60px;
 background: #338DC9;
 color: #eee;
 text-decoration: none;
}
.example3 span {
 position: absolute;
 top:50%;
 left:50%;
 transform: translateX(-50%) translateY(-50%);
}

できあがったもの

注意点としては親要素にposition:relativeを記述し忘れると配置が崩れる事があります。

また、テキストが長い半角英数の場合、枠をはみ出して表示されてしまいます。

同様に全角の場合は、意図しない箇所で改行される場合があります。

現象の再現(半角テキストが長い場合)

現象の再現(全角テキストが長い場合)

これもよく使う方法ですが、子要素を作るぶん利用頻度が若干落ちます。

デメリット

  • 入れ子になるためHTMLがシンプルでなくなる
  • 半角テキストの場合、テキストが枠をはみ出る
  • 全角テキストの場合、意図しない箇所で改行される

top bottom left rightを0で設定

ここから先は、私はあまり使わない方法になります。

使わない = 悪い、という訳ではなく、上記3つのパターンでほぼ解決するからです。

この方法はtop:0bottom:0left:0right:0を設定した上でmargin: autoで上下左右中央配置させます。

当初、上の3つのパターンと同じようにテキストを入れようと、子要素はspanで設定してみたのですが、spanでは中央寄せができませんでした(divでもできませんでした)。やり方が悪かったのでしょうか。

imgだと配置できたので、画像の中央配置には有効だと思います。

HTML

<a href="#" class="example4"><img src=" 画像のパス " alt=""></a>

CSS

.example4 {
 position: relative;
 display: inline-block;
 width:200px;
 height:60px;
 background: #338DC9;
 color: #eee;
 text-decoration: none;
}
.example4 img {
 position: absolute;
 top:0;
 bottom:0;
 left: 0;
 right: 0;
 margin: auto;
}

できあがったもの(画像を使用した時)

テキストを使用すると以下のようになります(テキストはspanで入れ子にしています)。

現象の再現(テキストを使用した時)

デメリット

  • 子要素がテキストだと中央寄せできない

display:tableおよびtable-celを使用した場合

display: tableを使ってテーブル化する方法です。

子要素をdisplay: table-cellとすることで、text-align: centervertical-align: middleで上下左右に中央寄せができるようになります。

これといったデメリットは見受けられないのですが、私はあまり使用していませんし、使用しているケースを何故か上のパターンほど見ません。

HTML

<a href="#" class="example5"><span>button</span></a>

CSS

.example5 {
 position: relative;
 display: table;
 width:200px;
 height:60px;
 background: #338DC9;
 color: #eee;
 text-decoration: none;
}
.example5 span {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
}

できあがったもの

いくつかパターンを覚えておくと、うまくレイアウトできない時の選択肢ができてコーディング時に役立つと思います。