Center layout of Layout solution

1. Horizontal Center layout (neither parent container nor child container width is fixed)

Scenario 1: use Inline-block and Text-alignto set the parent container's text-align= "center", that is, the inline element within the parent container is centered, Then the container display is set to Inline-block.

CSS code:

1 . Parent {2    text-align: Center;  3 }4.Child {5    background-color: red;  6    display: inline-block; simulating inline-block:display:inline;zoom:1 in IE6 and low-version browsers 7 }

Scenario 2: using table and margin, set the display of the sub-container to table,margin:0 auto, because the display:table width also varies with the content.

CSS code:

1 . Child {2    display: table;  3    margin: 0 auto;  4    background-color: red;  5 }

Scenario 3: using Absoulte and

 1  .parent  { 2   position :  relative ; 3 } {5   position :  absolute ; 6   left : ; 7   Transform : translatex ( -50%) ; 8   Background-color :  blue ; 9 } 

Scenario 4: with Flex and Justify-content, just set the display and Justify-content properties of the parent container.

CSS code:

1 . Parent{ 2 display: flex; 3 justify-content:Center; 4 }

The application scenario HTML code for all of the above CSS code is as follows:

1 <  class= "parent">2     <class = "Child" > DEMO</div>3</div>

2. Vertical Center layout (neither parent container nor child container height is fixed)

Scenario 1: Use Table-cell and vertical-align to achieve.

CSS code:

1 . Parent{ 2 display: Table-cell; 3 vertical-align: Middle; 4 }

Scenario 2: Use Absoulte and transform to achieve.

CSS code:

1 . Parent {2    position: relative;  3 }4.Child {5    background-color: red;  6    position: absolute;  7    top: 50%;  8    transform:translatey ( -50%);  9 }

Scenario 3: Use Flex and Align-items to implement.

1 . Parent{ 2 display: flex; 3 align-items:Center; 4 }

The application scenario HTML code for all of the above CSS code is as follows:

1 <div class= "parent" >2     <div class= "Child" >demo</div>3 </div>

3, horizontal and vertical are centered (both the width and height of the parent container and the child container are not fixed)

Scenario 1: Use Inline-block, Text-align, Table-cell, and vertical-align to achieve.

1 . Parent {2    text-align: Center;  3    display: table-cell;  4    vertical-align: Middle;  5 }6.Child {7    display: inline-block;  8 }

Scenario 2: Use absolute and transform to achieve.

CSS code:

1 . Parent {2    position: relative;  3 }4.Child {5    position: absolute;  6    left: 50%;  7    top:50%;  8    transform:translate ( -50%,-50%);  9 }

Scenario 3: Use Flex, Justify-content, and align-items to achieve.

CSS code:

1 . Parent {2    display: flex;  3    justify-content:Center;  4    align-items:Center;  5 }

The application scenario HTML code for all of the above CSS code is as follows:

1 <div class= "parent" >2     <div class= "Child" >demo</div>3 </div>

Center layout of Layout solution