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

display:flexは子要素の位置調整ができるCSSです。

中央寄せもカンタンにできます。

dispaly:flexで横の左右中央寄せ、縦の上下中央寄せする方法を解説します。

display:flexの基本はこちら↓

【左右中央寄せ】justify-content:center

左右中央寄せするにはdisplay:flexとともに「justify-content:center」を指定します。

<style>
.example{
    display: flex;
    /*コレ*/justify-content: center;
    align-items: flex-start;
    height: 150px;
    border: 1px solid #333;
    background: #d2e6ea;
    padding: 10px;
}
.example>div{
    border: 1px solid #333;
    background: #FFF;
    padding: 10px;
    width: 160px;
    text-align: center;
}
</style>
<div class="example">
    <div>左右中央寄せ</div>
</div>

justify-contentは子要素の横方向の位置調整するCSSです。

display:flexを指定した要素に指定します。

【上下中央寄せ】align-items:center

上下中央寄せするにはdisplay:flexとともに「align-items:center」を指定します。

<style>
.example2{
    display: flex;
    /*コレ*/align-items: center;
    height: 150px;
    border: 1px solid #333;
    background: #d2e6ea;
    padding: 10px;
}
.example2>div{
    border: 1px solid #333;
    background: #FFF;
    padding: 10px;
    width: 160px;
    text-align: center;
}
</style>
<div class="example2">
    <div>上下中央寄せ</div>
</div>

align-itemsは子要素の縦方向の位置調整するCSSです。

display:flexを指定した要素に指定します。

【上下左右中央寄せ】両方

上下左右中央寄せするにはdisplay:flexとともに下記両方を指定します。

<style>
.example3{
    display: flex;
    /*コレ*/justify-content: center;
    /*コレ*/align-items: center;
    height: 150px;
    border: 1px solid #333;
    background: #d2e6ea;
    padding: 10px;
}
.example3>div{
    border: 1px solid #333;
    background: #FFF;
    padding: 10px;
    width: 160px;
    text-align: center;
}
</style>
<div class="example3">
    <div>上下左右中央寄せ</div>
</div>

【まとめ】flexで中央寄せする方法

下記CSSをdisplay:flexとともに指定する。

• 左右中央寄せ　justify-content:center
• 上下中央寄せ　align-items:center
• 上下左右中央寄せするには両方指定

以上、display:flexで中央寄せする方法でした。