Best practices for 5 CSS Vertical horizontal centering

This article mainly for you to share the CSS vertical horizontal center of the 5 best solutions and their respective advantages and disadvantages, the introduction of very detailed, with reference value, need to refer to the friend, hope to help everyone.

CSS Center Alignment

• The browser prefix is omitted from the code

• The following examples are sorted by my personal criteria

• Of course there are more centering methods but I think only these 5 methods are the most complete solution

Flex Center

Advantage: The unknown height can be center-handled

<style>    . wrap{height:100%;d Isplay:flex; justify-content:center; Align-items:center;align-content: Center;}        . Other{background-color: #ccc; width:400px;height:400px,}/* Extra style to remove */</style><p class= "wrap" >    < P class= "Other" >        
Position + Translate Center

Pros: The unknown height can be centered and the nesting layer is minimized

<style>    /* Position optional absolute|fixed*/    center{position:absolute;left:50%;top:50%; Transform: Translate ( -50%,-50%);}        . Other{background-color: #ccc;}/* Additional styles can be removed */</style><p class= "center Other" >    
Table-cell Center

Cons: 1. The middle layer needs to be set to width (. Center). 2. Layer multiple nested one layer (. cell) 3. Center layer must be set width (% allowed)

<style>    . wrap{display:table;width:100%;height:100%;}    . Cell{display:table-cell;vertical-align:middle;}    . Center{width:400px;margin-left:auto;margin-right:auto;}    . Other{background-color: #ccc;  height:400px;} /* Additional styles to remove */</style><p class= "wrap" >    <p class= "cell" >        <p class= "center Other" >            
Traditional centering (2 types)

Cons: 1. The margin value must be auto. 2. Center layer must be set aspect (% allowed) 3. Position must be used

<style>        /* 1. Left, top, right, bottom can be arbitrary, but must be equal to        2. Position optional absolute|fixed    */    . center{ position:absolute;left:10px;top:10px;right:10px;bottom:10px;margin:auto;width:400px;height:400px;}    . Other{background-color: #ccc;}/* Additional styles can be removed */</style><p class= "center Other" >    
Disadvantage: The center layer must be set to a fixed height, and the magin need to be calculated by a high width.

<style>    . wrap{position:relative;height:100%;}    . center{position:absolute;left:50%;top:50%; width:400px;height:300px; Margin-left: -200px;margin-top: -150px;}    . Other{background-color: #ccc;}/* Additional styles can be removed */</style><p class= "wrap" >    <p class= "center Other" >