CSS layout-Vertical Horizontal Center

Recently in the summary of the front-end knowledge, also participated in some interviews, interview encountered a problem requires vertical level, now to summarize, or consolidate the knowledge.

Scenario One, Flex layout

. layout.flex{            Display:flex;            width:100%;            Align-items:center;    /* How to align */justify-content:center on the cross axis            ;     /* How to align */height:300px on spindle            ;            border:1px solid #000000;        } <section class= "Layout flex" >    
Programme II, Margin:auto
#content {            position:absolute;            Margin:auto;            top:0;            bottom:0;            left:0;            right:0;            width:300px;            height:100px;            BORDER:1PX solid blue;            /* The text in section is also horizontally and vertically centered */            text-align:center;            line-height:100px;        }    </style> <section id= "Content" >        horizontal Vertical Center--margin:auto    </section>
The section here sets any height and width to achieve horizontal vertical centering.
Programme III, transform
#content {            position:absolute;            top:50%;            left:50%;            height:100px;            width:500px;            BORDER:1PX solid blue;            Transform:translate ( -50%, -50%);        <section id= "Content" >        vertical Horizontal center--translate    </section>
Use the Transform mode to center any element of wide height, the disadvantage is that transform only ie10+ and other modern browsers are supported, there are compatibility issues.
Scenario four, table layout
  . container{            width:60%;            height:300px;            border:1px #000000;            display:table;        }        . cell{            Display:table-cell;            Text-align:center;            Vertical-align:middle;            BORDER:1PX solid blue;        } <section class= "Container" >        <div class= "cell" > Horizontal vertical Center--table</div>    </section>
Table layout method compatibility is good
CSS layout-Vertical Horizontal Center