CSS - Flexboxで縦並びの中央寄せにする

Flexコンテナ―にスタイル「flex-direction: column」と「align-items: center」を指定します。

Flexboxで縦並びの中央寄せ
Flexboxで縦並びの中央寄せ

縦並びの中央寄せにする方法

Flexコンテナ―(親要素)に次のスタイルを指定します。 
display: flex;
flex-direction: column;
align-items: center;

サンプルコード

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>Flexbox-縦並び・中央寄せ</title>
    <style>
        .frex-area {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .frex-area div {
            border: 1px solid gray;
            background-color: lightgrey;
            height: 5rem;
            width: 5rem;
        }
    </style>
</head>
<body>
    <div class="frex-area">
        <div>子要素1</div>
        <div>子要素2</div>
        <div>子要素3</div>
        <div>子要素4</div>
        <div>子要素5</div>
    </div>
</body>
</html>
サンプルコードの表示結果(Google Chrome)
サンプルコードの表示結果(Google Chrome)

検証環境