【CSS】要素をdisplay:flexで中央寄せする方法（上下左右、上下、左右）

ボタンの中の文字や、要素内のテキストを上下左右の中央に配置したいときなど、display:flexを使うと短いCSSで中央寄せできます。
ただ、中央に配置するといっても、
上下左右中央に配置したい場合、上下だけ中央に配置したい場合、左右だけ中央に配置したい場合で、指定するCSSが少し変わります。
今回は、display:flexを使って、要素を上下左右中央、上下中央、左右中央に配置する方法をご紹介します。

display:flexで要素を中央に配置する方法

まずは、display:flexを使って要素を上下左右中央に配置する基本形です。

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}

justify-content: center; で左右方向を中央に配置し、
align-items: center; で上下方向を中央に配置します。

具体例と解説

それでは、具体例を示しながら設置方法を確認していきます。
例では、.boxの中にあるp要素を、上下左右中央に配置する場合で考えます。

html

<div class="box">
    <p>テキストテキスト</p>
</div>

css

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

実装結果

display:flexを指定した要素が親要素になります。
この場合は.boxが親要素で、その中のpが中央に配置される要素です。

justify-content: center;を指定すると、横方向の中央に配置されます。
align-items: center;を指定すると、縦方向の中央に配置されます。

上下中央に配置したい場合は、親要素に高さが必要です。
高さがない場合、上下中央に配置されていても見た目では分かりにくくなります。

※具体例ではわかりやすくするため、背景色や、文字色などのcssを別途加えています。

まとめ

具体例と解説では、display:flexを使って要素を中央に配置する方法をご紹介しましたが、もちろん上下だけ、左右だけ中央に配置することも可能です。設置方法をまとめましたので是非ご活用ください。

上下左右中央に寄せる場合

上下左右の中央に配置したい場合は、justify-contentとalign-itemsの両方を指定します。

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}

※.boxに高さを設定する必要があります。

上下を中央に寄せる場合

上下だけ中央に配置したい場合は、align-items: center;を指定します。

.box {
    display: flex;
    align-items: center;
}

※.boxに高さを設定する必要があります。

左右を中央に寄せる場合

左右だけ中央に配置したい場合は、justify-content: center;を指定します。

.box {
    display: flex;
    justify-content: center;
}

positionを使った中央配置

cssで中央配置する方法としては、display:flexで中央配置する以外に、position:absoluteで中央配置する方法もあります。
この方法は下記で紹介していますので是非ご確認ください。
【CSS】要素をposition:absoluteで中央に配置する方法（上下左右、上下、左右）