CSS3 Flex を使用して div コンテンツを水平および垂直に中央揃えするいくつかの方法

/*1. 方向*/
        /*デフォルトの方向（行の正方向）*/
        /* フレックス方向: 行; */
        /*行の逆方向*/
        /* フレックス方向: 行反転; */
        /*columnz 正方向*/
        /*フレックス方向: 列;*/
        /*columnz 逆方向*/
        /*フレックス方向: 列反転;*/

        /*2. 改行*/
        /*flex-wrap: wrap;*/
        /*flex-wrap: wrap-reverse;*/

        /*3.方向+折り返しの組み合わせ*/
        /*flex-flow: 行の折り返しを逆にする;*/

        /*4. 主軸の配置*/
        /*開始点は左揃え*/
        /*コンテンツの端揃え: flex-start;*/
        /*開始点は右揃え*/
        /*コンテンツの両端揃え: flex-end;*/
        /*開始点は中央に揃えられます*/
        /*コンテンツの中央揃え;*/
        /*間隔が左右に広がる*/
        /*コンテンツの両端揃え: スペース間の間隔;*/
        /*内側の余白を均等にする*/
        /*コンテンツの両端揃え: スペースの周囲;*/
        /*等間隔*/
        /*コンテンツの均等配置: スペースを均等に;*/
        
        /*5. 交差軸配置: flex-direction: row; が y 軸を変更する場合、flex-direction: column; が x 軸を変更する場合*/
        /*デフォルトの交差軸配置*/
        /*アイテムの位置揃え: ストレッチ;*/
        /*デフォルトの交差軸は中央に配置されます*/
        /*項目の位置合わせ: 中央;*/
        /*デフォルトの交差軸配置*/
        /*アイテムの位置揃え: flex-start;*/
        /*デフォルトの交差軸配置*/
        /*align-items: flex-end;*/
        /*デフォルトの交差軸コンテンツ配置*/
        /*アイテムの位置揃え: ベースライン;*/

        /*6. 複数行の交差軸配置*/
        /*align-content: ストレッチ;*/
        /*交差軸の複数の線を中央揃えにする*/
        /*コンテンツの位置合わせ: 中央;*/
        /*交差軸に沿って整列した複数の線*/
        /*align-content: flex-start;*/
        /* 複数行の交差軸配置 */
        /*align-content: flex-end;*/
        /*複数の行の内側の余白は等しくなります*/
        /*コンテンツの位置揃え: スペースを空ける;*/
        /*交差軸の複数の線が左右に散らばっています*/
        /*コンテンツの位置合わせ: スペース間の間隔;*/
        /*複数の線は交差軸間の間隔が等しくなります*/
        /*コンテンツの位置揃え: スペース均等;*/

/*1. 項目の順序を制御する*/
        /*順序: 2;*/
        /*2. 比例してスペースを拡大します。数値が大きいほど、スペースが大きくなります。値が 0 の場合は拡大しません。*/
        /*フレックス成長: 2;*/
        /*3. スペースを比例的に縮小します。数値が大きいほど、スペースは小さくなります。0 の値は圧縮されません。*/
        /*フレックス収縮: 2;*/
        /*4. flex-direction、row=width、column=height で使用する必要があり、priority は width height よりも高いため、auto 値は priority に優先されます*/
        /*フレックスベース: 600px;*/
        /*5.flex=拡大+縮小+基礎*/
        /*grow = 1 && shrink = 1 && basis = auto*/
        /*フレックス: 自動;*/
        /* 拡大 = 0 && 縮小 = 1 && 基準 = 自動 */
        /*flex: 初期値;*/
         /*grow = 0 && shrink = 0 && basis = auto*/
        /*フレックス: なし;*/
        /*6.align-self はコンテナの align-items をオーバーライドします*/
        /*align-self: flex-start;*/