CSSでdivやテキストを上下左右（縦・横方向）に中央寄せする方法

よこのじ（@yokonoji_work）です。

CSSでdivタグや文字を真ん中に表示させたいと思っても、なかなかうまくいかないこともあります（水平方向、垂直方向に自在に中央寄せするのは難しいですね・・・）。

そのたびに、「中央寄せ」「真ん中」「センタリング」といったワードで検索していましたので、この記事で一通りの方法をまとめておきたいと思います。

参考にしてください。

divを中央寄せする

左右（横方向）の中央寄せ

いくつかの方法がありますので、それぞれ確認してみましょう。

margin: auto を使う

divタグを中央寄せするには、margin: auto; を使って左右同じ大きさのマージン領域を作ります。divのようなブロック要素は横幅100%で広がるので、適当な width を指定しています。

このとき、div, pタグのように display の初期値がblockであれば指定不要ですが、そうでないタグの場合は display: block; を指定してください。

.tag-Xcenter{
    display: block;
    margin: 0 auto 0 auto;
}

display: inline-block を使う

aタグ、imgタグ、spanタグのような要素は、初期状態ではインライン要素として扱われます。これらは text-align: center; で中央寄せすることができます。

これを利用して、対象の要素にインライン要素のように扱える display: inline-block; を指定します。そのうえで、対象要素の親要素に text-align: center; を指定してください。

.parent{
    text-align: center;
}
.tag-Xcenter{
    display: inline-block;
}

position: absolute と transform を使う

対象要素に position: absolute; を指定して、left :50% と transform: translateX(-50%); で中央寄せしています。このとき、親要素には position: relative; を指定しておく必要があります。

leftで対象要素の左辺を50%の位置に持ってきて、対象要素のサイズの50%だけマイナス方向にずらす操作をしています。

.parent{
    position: relative;
}
.tag-Ycenter{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

上下（縦方向）の中央寄せ

position: absolute と transform を使う

横方向でやったのと同じように、縦方向の位置をtopから50%の位置に配置しています。横方向と縦方向を合わせることで真ん中に配置できます。

.tag-Ycenter{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

テキストを中央寄せする

左右（横方向）の中央寄せ

テキストを横方向で中央寄せする場合は、text-align: center; をCSSで指定します。テキストを含む要素か、その親要素に対して指定します。画像の場合はimgタグの親要素に指定すると画像も中央寄せできます。

.text-Xcenter{
    text-align: center;
}

上下（縦方向）の中央寄せ

テキストを縦方向に中央寄せする方法はいくつかあります。

line-height を使う

テキストは、行内の真ん中（縦方向）に表示されます。そのため、行の高さを親要素と同じ高さに指定することで、中央寄せされたように表示できます。

この例では、height: 100px; の青いボックスと同じ高さで line-height を指定しています。

.text-Ycenter{
    line-height: 100px; 
}

しかし、この方法が有効なのは1行で表示する場合だけです。2行目以降の行の高さも同様に指定した値になるため、このようにおかしなことになってしまいます。

display と vertical-align を使う

display: table-cell; を指定すると、要素を表（テーブル）のtd要素のように扱うことができます。そして vertical-align: middle; は、インライン要素やテーブルセルの中で垂直方向に中央寄せできる指定です（ブロック要素には適用できません）。

.text-Ycenter{
    display: table-cell;
    vertical-align: middle;
}

この場合は行の高さを変えないので、複数行にしても自然に表示されます。

上下左右の中央寄せ

先ほどdivタグの中央寄せで行った方法をpタグに利用して、要素自体を縦・横方向の真ん中に配置します。

青い四角が親要素で、ここに position: relative; を指定します。「text」という文字が書かれた部分がpタグの子要素です。子要素には position: absolute; を指定したうえで、上と左から50％の位置にpタグを配置しています。

<div class="box">
    <p class="text-XYcenter">text<br>text</p>
</div>

/*親要素*/
.box{
    position: relative;
    width: 100px;    height: 100px;
    background-color: #59c8cf;
    margin: 0 0 0 0;
}
/*子要素*/
.text-XYcenter{
    position: absolute;
    top: 50%;    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #ffffc1;
}