CSS/CSS3 to achieve vertical centering and horizontal centering of unknown, wide-height elements

Some of its usual layouts also often have the need to achieve vertical centering and horizontal centering of elements, following the writing of the horizontal and vertical centering of unknown wide-height elements implemented by several CSS/CSS3

PS: Do not consider compatibility issues (next will write JS implementation elements of the horizontal and vertical center)

The first kind of CSS3 transform

. ele{/* set Element Absolute positioning */    position:absolute;/*top 50%*/    top:50%;/*left 50%*/left:50%;/*css3 transform   implementation *    /Transform:translate (-50%,-50%);}

The second type of Flex box layout

. ele{/* Elastic Box Model */        display:flex;/* Spindle Center Alignment */    justify-content:center;/* side Axis alignment */        align-items:center;   }

The Third Kind of display Table-cell

. box{/* let elements render as table cells */    display:table-cell;/* Set text horizontally centered */    text-align:center;/* Set Text to center vertically */    vertical-align : Middle;     

The third type is to add a style to the parent. First write these kinds, enough for everyone to use, and through the pseudo-class to achieve the center of the effect, interested can knock yourself down to try

CSS/CSS3 to achieve vertical centering and horizontal centering of unknown, wide-height elements