flexboxで上下左右中央揃えをするやり方

こういうのやりたいとき

実際にコード書いてみる。

<div class="flexbox-center">
    <span>真ん中</span>
</div>

.flexbox-center {
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
    width: 200px; /* 見た目用 */
    height: 200px; /* 見た目用 */
    border: 1px solid; /* 見た目用 */
}
.flexbox-center span {
    border: 1px solid; /* 見た目用 */
}

できました！

解説

・display: flex; を使って直下の子要素（今回はspan）がflex-direction: column; を設定することで縦に並ぶようになる。
・justify-content 縦方向、align-items 横方向の設定することで中央配置できる。

関連記事
【CSS】要素を中央に配置する方法（上下・中央）