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

2020年5月21日

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

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

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

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

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

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

個人的にはhtml、css共に一番シンプルで分かりやすい記述だと思います。非常に使いやすい記述なのですが、ボタンの縦幅 = 1行の縦幅となるため、テキストが2行以上になるとレイアウトが崩れます。

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;
}

デメリット

テキストが2行以上の場合は使用できない。

現象の再現

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

display:flexを使用した場合

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

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

この方法で解決するのがほとんどですが、display:flexを使用することで隣接する要素のレイアウトに影響する事がありますので、その時は別の方法を用いています。

また、display:flexはベンダープレフィックスが必要になるので、多用するとcssが長くなりがちです。

HTML

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

CSS

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

テキストが2行でも縦中央に配置されます

デメリット

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

transformを使用した場合

子要素を作り、縦横方向にそれぞれ移動させる方法です。

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

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

注意点としては親要素にposition: relativeを記述し忘れるととんでもない位置に配置されることがあるので気を付けましょう。

また、レイアウトによっては、テキストに意図しない改行が発生する事があります。

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

HTML

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

CSS

.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%);
}

デメリット

・テキストに意図しない改行が発生する事がある。

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

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

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