What are the methods for CSS vertical horizontal centering?

This time to bring you the CSS vertical horizontal center There are several ways, CSS vertical horizontal center of the attention to what, the following is the actual case, together to see.

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" >        

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Redraw and rearrange how to use

Canvas animation for rotating Tai Chi