Several methods of horizontal and vertical centering of div content using css3 flex

/*1. Direction*/
        /*Default direction (row positive direction)*/
        /* flex-direction: row; */
        /*row reverse direction*/
        /* flex-direction: row-reverse; */
        /*columnz positive direction*/
        /*flex-direction: column;*/
        /*columnz reverse direction*/
        /*flex-direction: column-reverse;*/

        /*2. Line break*/
        /*flex-wrap: wrap;*/
        /*flex-wrap: wrap-reverse;*/

        /*3.direction+wrep combination*/
        /*flex-flow: row wrap-reverse;*/

        /*4. Main axis alignment*/
        /*Starting point left aligned*/
        /*justify-content: flex-start;*/
        /*Starting point right aligned*/
        /*justify-content: flex-end;*/
        /*Starting point is aligned to the center*/
        /*justify-content: center;*/
        /*Intervals spread out to the left and right*/
        /*justify-content: space-between;*/
        /*Equal inner margins*/
        /*justify-content: space-around;*/
        /*Equal intervals*/
        /*justify-content: space-evenly;*/
        
        /*5. Cross-axis alignment: when flex-direction: row; modifies the y-axis, when flex-direction: column; modifies the x-axis*/
        /*Default cross axis alignment*/
        /*align-items: stretch;*/
        /*Default cross axis is centered*/
        /*align-items: center;*/
        /*Default cross axis alignment*/
        /*align-items: flex-start;*/
        /*Default cross axis alignment*/
        /*align-items: flex-end;*/
        /*Default cross axis content alignment*/
        /*align-items: baseline;*/

        /*6. Multi-line cross-axis alignment*/
        /*align-content: stretch;*/
        /*Center alignment of multiple lines of cross axis*/
        /*align-content: center;*/
        /*Multiple lines aligned on the cross axis*/
        /*align-content: flex-start;*/
        /*Multiple lines cross axis alignment*/
        /*align-content: flex-end;*/
        /*Multiple lines have equal inner margins*/
        /*align-content: space-around;*/
        /*Multiple lines of cross-axis are scattered left and right*/
        /*align-content: space-between;*/
        /*Multiple lines have equal spacing between cross axes*/
        /*align-content: space-evenly;*/

/*1. Control the order of items*/
        /*order: 2;*/
        /*2. Expand the space in proportion. The larger the number, the larger the space. The value of 0 does not expand*/
        /*flex-grow: 2;*/
        /*3. Reduce the space proportionally. The larger the number, the smaller the space. 0 value is not compressed*/
        /*flex-shrink: 2;*/
        /*4. Need to be used with flex-direction, row=width column=height, and the priority is higher than width height, auto value gives way to priority*/
        /*flex-basis: 600px;*/
        /*5.flex=grow+shrink+basis*/
        /*grow = 1 && shrink = 1 && basis = auto*/
        /*flex: auto;*/
        /*grow = 0 && shrink = 1 && basis = auto*/
        /*flex: initial;*/
         /*grow = 0 && shrink = 0 && basis = auto*/
        /*flex: none;*/
        /*6.align-self overrides the container's align-items*/
        /*align-self: flex-start;*/