CSSで横並びしつつ上下中央寄せにする方法

「要素を横並べしつつ上下中央寄せしたいんだけど、どうやるんだろう？」

CSSで横並びしつつ上下中央寄せにする方法を解説します。

【結論】display:flexとitem-align:center

<style>
.example{
    /*コレ*/display: flex;
    /*コレ*/align-items: center;
    /*ついでにコレ*/justify-content: center;
    border: 1px solid #999;
    height: 200px;
    background: #e0f5ff;
}
.example>div{
    border: 1px solid #999;
    padding: 15px;
    width: 100px;
    background: #faefcb;
}
</style>
<div class="example">
    <div>左</div>
    <div>右</div>
</div>

「display:flex」は子要素の位置などを変更できるCSSです。

これを使うとカンタンに横並べができます。

「align-items」は「display:flex」内の子要素の縦の位置を指定するCSSです。

「align-items: center」を指定すると上下中央寄せができます。

「justify-content」は「display:flex」内の子要素の横の位置を指定するCSSです。

「justify-content: center」を指定すると左右中央寄せができます。

display:flexを知ると位置調整が楽になります。下記記事で詳しく勉強しましょう。

【まとめ】横並びしつつ上下中央寄せにする

横並べしたい要素の親に下記を指定する。

• display:flex
• item-align:center

以上、CSSで横並びしつつ上下中央寄せにする方法でした。