Summary of the scheme centered on CSS settings

Recall that their usual project encountered more is CSS how to let the element center display, in fact, almost every situation has encountered, the method used are also pros and cons, the following methods to do a summary of the pit point, will be pointed out, I hope to meet some of the problems of the classmate reference:

First, the horizontal center

01 in-line element text-align:center;

{   text-align: center;}

02 Block-level element margin:auto;

Note: The lower version of the browser also needs to set text-align:center;

{    text-align: center;}  {    margin: auto;      Border: 1px solid blue;}

Second, vertical center

01 in-Line elements (Vertical center of single-line text): Set line-height = height;

{   height: 200px;    line-height: 200px;    Border: 1px solid red;}

02 Block-level elements: absolute positioning (need to know the dimensions in advance)

Pros: Good compatibility

Cons: need to know the dimensions in advance, scalability and self-adaptability is not good

. Parent{position:relative;Height:200px;}. Child{width:80px;Height:40px;background:Blue;position:Absolute; Left:50%;Top:50%;Margin-top:-20px;Margin-left:-40px;}

03 Block level elements: absolute positioning + transform

Pros: no need to know the dimensions in advance
Cons: poor compatibility, only supports ie9+ browser , but also raises some other strange compatibility problems

{    position: relative;     height: 200px;}  {    width: 80px;     Height: 40px;     position: absolute;     Left: 50%;     top: 50%;     Transform: translate ( -50%, -50%);     Background: blue;}

04 Block-level elements: absolute positioning + margin:auto;

Advantages: No need to know the size in advance, compatibility is good
Cons: I haven't met yet.
This method from the Zhang Xinxu Teacher's blog, I also understand, before applying to the actual development of the

. Parent{position:relative;Height:200px;}. Child{width:80px;Height:40px;position:Absolute; Left:0;Top:0; Right:0;Bottom:0;margin:Auto;background:Blue;}

05 Block-level elements: Padding

Disadvantage: If the height is fixed, the dimensions need to be calculated in advance ( only applicable in certain cases ).

{    padding: 5% 0;}  {    padding: 10% 0;     Background: blue;}

06 Block-level elements: Display:table-cell

The parent element must be set display:table so that the Table-cell of the element will take effect

{    width: 600px;     height: 200px;     Border: 1px solid red;     display: table;}  {    display: table-cell;     Vertical-align: Middle;}

07 Block level elements: Display:flex (Mobile page recommended)

Cons: Poor compatibility

{    width: 600px;     height: 200px;     Border: 1px solid red;     display: flex;     align-items: Center;     justify-content: Center;  /* Center Horizontally */}  {    background: blue;}

08 Block-level elements: pseudo-elements

This program is from the new book of Zhang Xin Asahi great god: "CSS World" read the

Vertical-align This attribute needs to be referenced with the baseline of the elements within the same element, the height of 100% is naturally 50% at the height of the normal midline as the baseline, middle default to the Zikiki line, naturally also vertically centered aligned

. Parent{width:300px;Height:300px;Border:1px solid Red;text-align:Center;}. Child{background:Blue;width:100px;Height:40px;Display:Inline-block;vertical-align:Middle;}. Parent::before{content:"';Height:100%;Display:Inline-block;vertical-align:Middle; }

09 Block-level elements: Inline-block

HTML code:

<Divclass= "Parent">    <Divclass= "Child">Child</Div>    <Divclass= "Brother">Brother</Div></Div>

CSS code:

. Parent{width:400px;Height:400px;Border:1px solid Red;position:relative;}. Child,. Brother{Display:Inline-block;vertical-align:Middle;}. Child{background:Blue;font-size:12px;}. Brother{Height:400px;font-size:0;}

Other

Table layout is the most common layout of the front end ten years ago, the most worry but redundancy is also many, the structure of nesting is also relatively deep. Now the front end changes rapidly, not recommended

< Table >     < TR >         <  align= "center"  valign= "middle">content  </td>      </tr> </  Table>

Hope that the above summary of the relevant students can play a reference role.

Summary of the scheme centered on CSS settings