Summary of CSS Vertical horizontal centering method

In the layout of the time can often be used to center, in this summary

HTML structure:

<class= "wrap">    <class= " Content "></div></div>

1. Horizontal Center: Margin:auto;

 .wrap  { width :  400px ;  height :  400px ;  Background-color :  LightBlue ;} .content  { width :  200px ;  height :  200px ;     Background-color :  lightcoral ; /*  margin:auto can only be centered horizontally  */     margin :  auto ;} 

This method is simply a single line of code, but only horizontally centered, and why vertical centering does not work: The default width inherits the parent width, and the height cannot be inherited by the content, and the center is calculated relative to the parent, so vertical centering does not work.

The effect is as follows:

2. Center vertically: Table-cell

. wrap{
width:400px;
HEIGHT:60RPX;
Background-color:lightblue;
/* Set the display of the parent element to table-cell*/
Display:table-cell;
Vertical-align:middle;
}
. content{
width:200px;
height:200px;
Background-color:lightcoral;
}

One thing to emphasize here is that Display:table-cell is set on the parent element, and in the table cell, the Vertical-align property sets the alignment of the cell contents in the Cell box. This is set to middle center alignment, interested small partners can also try other values such as: Top,bottom and so on.

The effect is as follows:

3. A horizontal center, a vertical center together can not be vertically horizontal center

. Wrap {    width: 400px;     height: 400px;     background-color: lightblue;     display: Table-cell;     vertical-align: Middle;} . Content {    width: 200px;     height: 200px;     background-color: lightcoral;     margin: auto;}

：

Bingo is so perfect.

4. Absolute positioning (unknown height)

. Wrap{width:400px;Height:400px;Background-color:LightBlue;/*parent element Relative positioning*/position:relative;}. Content{width:200px;Height:200px;Background-color:lightcoral;/*absolute positioning of child elements*/position:Absolute;/*The child elements are offset relative top,left respectively 50%*/Top:50%; Left:50%;/*The child elements move -50%, respectively, relative to their own top,left*/Transform:Translate ( -50%,-50%);}

：

The advantage of the above two methods is that it can be used in a highly unknown situation, the following method is necessary to know the height of the child element

5. Absolute positioning adjustment Negative margin value

. Wrap{width:400px;Height:400px;Background-color:LightBlue;/*parent element Relative positioning*/position:relative;}. Content{width:200px;Height:200px;Background-color:lightcoral;/*absolute positioning of child elements*/position:Absolute;/*The child elements are offset relative top,left respectively 50%*/Top:50%; Left:50%;/*child elements Move negative 100 pixels relative to their own top,left, respectively*/Margin-top:-100px;Margin-left:-100px;}

Just like the one above, it's not on.

6. Elastic box Model: Display:flex;

. Wrap {    width: 400px;     height: 400px;     background-color: lightblue;     display:flex;} . Content {    width: 200px;     height: 200px;     background-color: lightcoral;    margin:auto;}        

Flex compatibility issues can be found in:

7. Single-line text centered: Line-height

HTML structure:

<class= "Content"> Everything is the best arrangement </div> 

CSS style:

. content{    width:200px;    height:200px;    background-color:lightcoral;    line-height:200px;}

：

8. Multiple lines of text can not be used line-height, but also with the above Table-cell method to make multiline text center

. content{    width:200px;    height:200px;    background-color:lightcoral;    Display:table-cell;    Vertical-align:middle; }

You can enter text or text input directly into a div (. content) in a tag

Summary of CSS Vertical horizontal centering method