CSS vertical center-dehua. Chen

CSS vertical center-dehua. Chen 1. Text vertical center

Line-height + text-align: center

1
2 horizontal vertical center 3
  

 1 html,body{   2   margin: 0; 3 } 4 .wrap{ 5   line-height: 400px; 6   text-align:center; 7  8   height: 400px; 9   font-size: 36px;10   background-color: #ccc;11 }

2. Align horizontally and vertically using the Box Model

The box model we generally talk about is the box model of the block-level box, and only the box model of the block-level box is used a little more, the block-level box is composed of content-box, padding-box, border-box, and margin-box, for example:

Use the calc () of css3 for dynamic computation:

1 
  2   
3 
 

 1 .wrap{ 2   margin-top: 20px; 3   margin-left: auto; 4   margin-right: auto; 5   width: 400px; 6   height: 400px; 7   background-color: #ccc; 8   .content{ 9     padding: -webkit-calc(~"(100% - 100px) / 2");10     padding: calc(~"(100% - 100px) / 2");11     width: 100px;12     height: 100px;13     background-color: #333;14     background-clip: content-box;15   }16 }

Note that here I use a ~ in calc ~ "", This is a syntax in less. It tells less that it is not compiled by less. If it is compiled by less, the parameters of the css calc function are not 100%-Px, but 0%.

3. Use absolute positioning to center

1
2
Absolute ing principle: When an element is overly limited, set margin to auto, and the browser recalculates the value of margin,
Excessive restriction refers to setting top/bottom, height, left/right, and width at the same time. 3
4

Absolute ing principle: When an element is overly limited, set margin to auto, and the browser recalculates the value of margin, excessive restriction refers to setting top/bottom, height, left/right, and width at the same time.

1. absolute_center {
Position: absolute;
Width: 200px;
Height: 200px;
Top: 0;
Bottom: 0;
Left: 0;
Right: 0;
Margin: auto;
Background: # 518fca;
Overflow: auto;
Resize: both;/* is used to set all elements except that overflow is visible */
}

To use absolute positioning, the element must have a clear height. When the content exceeds the element height, you must set overflow to determine the appearance of the scroll bar.

Advantage: The response type is supported. Only this method is vertically centered after resize.

Disadvantage: When overflow is not explicitly set, the content overflows when the element height is exceeded and there is no scroll bar.

4. Negative marginTop Mode

After the element height is known, use absolute positioning to set top to 50%, and mergin-top to half of the content height (height + padding)/2; when the content exceeds the element height, you must set overflow to determine the appearance of the scroll bar.

Principle: top: 50% the upper boundary of the element is located at the point in the contained box. If the negative outer boundary is set, the vertical center of the element overlaps with the center of the contained box;

1 .negative_margin_top{ 
 width:200px; 
 height:200px; 
 position:absolute;
 top:50%;
 left:0;
 right:0;
 margin:auto;
 margin-top:-100px; /*-(height+padding)/2*/ }    

Advantages: less code, high browser compatibility, and support for ie6 ie7

Disadvantage: The response type is not supported (percentage, min/max-width cannot be used)

5. floater with additional elements

If the element height is known, insert an additional element floater outside the center element and set the floater height to 50%; margin-bottom to half of the center element height (height + padding)/2. When the content exceeds the element height, you must set overflow to determine the appearance of the scroll bar.

The principle is similar to the method 2. The bottom boundary of floater is the center line of the contained frame. the center line of the negative bottom boundary ensures that the center line is coincident with the center line of the contained frame.

1
2
3
If the element height is known, insert an additional element floater outside the center element and set the floater height to 50%;
Margin-bottom is half of the center element height (height + padding)/2. When the content exceeds the element height, you must set overflow to determine the appearance of the scroll bar.
4

1 .floater{ 
 height:50%;
 margin-bottom:-100px;
}2 .floater_center{
height:200px;
width:200px;
margin:auto;
}

Advantage: Good browser compatibility and compatibility with earlier IE versions

Disadvantage: additional elements are required, and the response type is not supported (percentage, min/max-width cannot be used)

6. table-cell Mode

Set the display box of the center element to table, the display box of the center element to table-cell, and the vertical-align to middle.

Principle: After vertical-align is set to middle, the content in the cell is aligned with the middle of the row.

1. container2 {
Display: table;
Height: 100%;
} 2. table_cell {
/* Vertically center the cell. If the outer p is not table, tablecell must have a height */
Display: table-cell;
Vertical-align: middle;
}

Advantage: supports variable height of any content and responsive

Disadvantage: Each element that needs to be vertically centered requires additional tags (two additional elements, table and table-cell, are required)

7. inline-block Method

Set the center element display to inline-block, vertical-align to middle, set the after pseudo element for the contained box, and set the pseudo element display to inline-block, vercial-align is set to middle, and height is set to 100% to support the container.

Principle: Set vertical-align: middle For the inline-block element of the same row. The inline-block element in the row is aligned according to the vertical center line of the element.

    
How much helplessness and regret are there in my life?
The fall of rain and wind erosion and cangchu must be water, quietly flowing through the days of Youth struggle and touching the ideal years.

1. container {display: block;} 2/* inline-block previous and present */3. container: after {content :'';
Display: inline-block;
Vertical-align: middle;
Height: 100%;
} 4. inline_block {
Display: inline-block;
Vertical-align: middle;
}

Advantages: responsive and variable height

Disadvantage: additional tags are added.

6. line-height mode

This method is only applicable to a single line of text that is relatively simple. Set line-height to the same height as the element height.

Principle: if the line-height is greater than the font-size, the browser will evenly distribute the line-height to the upper and lower ends of the text.

1
In fact, every one of us is a world, and even the most ordinary person must fight for the world in which he lives. 2

1 .single_line{
height: 30px; 
font-size: 14px;
line-height: 30px;
border: 1px solid #518dca;
}

Advantage: simple and clear

Disadvantage: it is only applicable to single-line text and has many limitations.

7. Elastic box Layout

Use the elastic box layout to align the spindle and side axis of the word element in the center.

Principle: CSS elastic box

1
2
We must be down-to-earth in real life, and jump out of reality from time to look at the ideal high-end.
Establish a full system in the spiritual world, leading us not to be lost or slack.
When we wake up and fall into reality, we can shoulder the burden of life without complaint.
This is what Sun shaoping taught me.
We can only regard hard work as the necessity of life forever. Even if there is no expectation for harvest, we will continue to cultivate our work calmly.
3. To do this, the road is long. 4
5
    

1 .is-Flexbox {display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display:  -webkit-flex; 
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

Advantage: real vertical center layout

Disadvantage: ie11 supports elastic layout.