Vertical CSS center, css Center

Vertical CSS center, css Center

1. Use absolute positioning to center

1 <div class = "container"> 2 <div class = "center absolute_center"> absolute position principle: When an element is overly limited, set margin to auto, the browser recalculates the value of margin. <br/> excessive limitation means that top/bottom, height, left/right, and width are set at the same time. 3 </div> 4 </div>

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 the 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.

2. 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)

3. floater

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 <div class = "container"> 2 <div class = "floater"> </div> 3 <div class = "center floater_center"> the element height is known, insert an additional element floater outside the center element and set the floater height to 50%. <br/> 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. </Div> 4 </div>

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)

4. 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 div is not a 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)

5. 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.

<Div class = "container"> <div class = "center inline_block"> How much helplessness and regret are there in your life? <Br> the fallen corners of the rain and wind erosion must be water, quietly flowing through the days of Youth struggle and touching the ideal years. </Div>

1. container {display: block;} 2/* inline-block past 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 <div class = "single_line"> In fact, every one of us lives in a world, and even the most ordinary person needs to fight for the world in which he lives. 2 </div>

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 <div class = "container is-Flexbox"> 2 <div class = "center"> you must be down-to-earth in real life, from time to time, you have to jump out of reality and look at the ideal high-end. <Br> establish a full system in the spiritual world, leading us to stay away from the loss and slack. <Br> when we wake up and fall into reality, we can shoulder the burden of life without complaint. <Br> This Is What sun shaoping taught me. <Br> hard work can only be regarded as the necessity of life forever. Even if there is no expectation for harvest, continue farming calmly. <Br> 3 the road is long to achieve this. 4 </div> 5 </div>

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.