ホーム(記事一覧)へ

【CSS】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>

上下中央寄せ 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>

上下左右中央寄せ 両方

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

justify-content: center

align-items: center

上下左右中央寄せ
<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で上下左右中央寄せする方法でした。

関連記事