CSSでテキストを上下中央寄せにする方法

CSSでテキストを上下中央寄せにすること、よくありますよね。
でも意外とやり方がわからないものです。
そんな「テキストを上下中央寄せにする方法」を説明します。

結論

1. display:flexを使う【オススメ】
2. paddingで調整【カンタン】
3. display:table-cellを使う

以下で詳しく説明します。

方法1.display:flexを使う

高さを指定したいときはdisplay:flexを使いましょう。
この方法ならテキストじゃなくでブロックでも同様に上下中央寄せができます。

html

<div class="flex-center">
    テキスト
</div>

CSS

.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 100px;
    border: 1px solid #999;
    background: #f2f2f2;
}

方法2.paddingで調整

高さを指定しなくていいときはpaddingでさくっと調整しましょう。

html

<div class="padding-center">
    テキスト
</div>

CSS

.padding-center{
     width: 200px;
     padding: 30px 10px;
     text-align: center;
     border: 1px solid #999;
     background: #f2f2f2;
 }

方法3.display:table-cellを使う

あまりオススメしませんが、一応できます。

html

<div class="table-center">
    テキスト
</div>

CSS

<style>
.table-center{
    display: table-cell;
    width: 200px;
    padding: 30px 10px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #999;
    background: #f2f2f2;
}
</style>

まとめ

1. display:flexを使う
2. paddingで調整
3. display:table-cellを使う

以上、CSSでテキストを上下中央寄せにする方法でした。