CSS Vertical Centering Summary

Original: CSS Vertical Center Summary

The problem of vertical centering in work is summed up in a few ways to share with you. The vertical centering discussed in this article supports only ie8+

1. Vertical centering with absolute positioning

                <Divclass= "Container">            <!--<div class= "Floater" ></div> -            <Divclass= "Center Absolute_center">life can not wait for others to arrange, to self-fight and struggle;<BR>whether the result is happy or sad, but what can be comforted is that you always live in this world. <BR>with this understanding, you will cherish life, not cynicism, but also give yourself a powerful inner power. </Div>        </Div>    

HTML Structure

Absolute alignment principle: When the element is over-constrained, the margin is set to auto, and the browser calculates the value of the margin, which is too restrictive to set top/bottom and height or left/right and width at the same time.

. absolute_center{                /*display:none;*/                position:absolute;                width:200px;                height:200px;                top:0;                bottom:0;                left:0;                right:0;                Margin:auto;                Background: #518fca;                The resize:both;/* is used to set all elements except overflow as visible */                Overflow:auto;            }

Life can not wait for others to arrange, to self-fight and struggle;
Whether the result is happy or sad, but what can be comforted is that you always live in this world.
With this understanding, you will cherish life, not cynicism, but also give yourself a powerful inner power.

Using absolute positioning requires that the element be set to an explicit height. Setting overflow to determine the appearance of scroll bars when content exceeds the element height

Pros: Support responsive, only this method is still vertically centered after resize

Disadvantage: When overflow is not explicitly set, the content will overflow when it exceeds the element height, no scroll bar

　　

2, Negative margintop way

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

Principle: The upper boundary of the top:50% element is at the midpoint of the containing box, and the negative outer boundary is coincident with the center of the containing frame;

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

Life has how many helpless and regret, but also have what kind of sorrow and sadness?
Rain-soaked desolate and Cang Chu must be water, quietly through the days of youth struggle and touch the ideal years.

Pros: Low code volume, high browser compatibility support IE6 IE7

Cons: No response is supported (percent not used, min/max-width)

3. Floater with additional elements

The element height is known, inserting an extra element outside the center element floater, setting the height of the floater to 50%;margin-bottom as half of the center element (height + padding)/2. Setting overflow determines the appearance of scrollbars when the content exceeds the height of the element.

The principle is similar to the 2 method, the bottom boundary of the floater is the center line of the containing box, and the negative outer boundary guarantees that center line is coincident with the center line of the containing box.

<Divclass= "Container">            <Divclass= "Floater"></Div>            <Divclass= "Center Floater_center">people and Society, the summary of all the struggle may be the golden mean. <BR>rather than serious, it is better to casually, picking chrysanthemum under the east fence, leisurely see Nanshan.            Money will find a drunk, no money to find a sleep, and have no dispute, the same. </Div>        </Div>

View Code

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

People and society, the summary of all the struggle may be the golden mean.
Rather than serious, it is better to casually, picking chrysanthemum under the east fence, leisurely see Nanshan. Money will find a drunk, no money to find a sleep, and have no dispute, the same.

Pros: Good browser compatibility, support old version ie

Cons: Requires extra elements and does not support responsive

4, Table-cell Way

Set the display of the center element's include box display to the Table,center element to table-cell,vertical-align set to middle.

Principle: Using the table layout feature, Vertical-align is set to middle, the middle of the contents of the cell is aligned with the middle of the row

<Divclass= "Container2">            <!--<div class= "Floater" ></div> -            <Divclass= "Center Table_cell">life has how many helpless and regret, but also have what kind of sorrow and sadness?<BR>rain-soaked desolate and Cang Chu must be water, quietly through the days of youth struggle and touch the ideal years. </Div>        </Div>

View Code

        . container2{                display:table;                height:100%;            }            . table_cell{/* Center The cell vertically, if the outer div is not table then TableCell must have a height/                Display:table-cell;                Vertical-align:middle;            }

Life has how many helpless and regret, but also have what kind of sorrow and sadness?
Rain-soaked desolate and Cang Chu must be water, quietly through the days of youth struggle and touch the ideal years.

Pros: Supports variable heights of any content, supports responsive

Cons: Each element that needs to be vertically centered needs additional tags (table, Table-cell two extra elements required)

5, Inline-block Way

Set the center element display to Inline-block,vertical-align set to middle, set the after pseudo element for the include box, set the pseudo element display to Inline-block, The vercial-align is set to middle, while the height is set to 100% to open the container.

Principle: Set Vertical-align:middle for the inline-block element of the same row, and the Inline-block element in that row is aligned to the vertical centerline of the element.

        <Divclass= "Container">            <!--<div class= "Floater" ></div> -            <Divclass= "Center Inline_block">life has how many helpless and regret, but also have what kind of sorrow and sadness?<BR>rain-soaked desolate and Cang Chu must be water, quietly through the days of youth struggle and touch the ideal years. </Div>        </Div>

View Code

        . container{                display:block;            }            /*inline-block's Past Life * *            . container:after{                content: ';                Display:inline-block;                Vertical-align:middle;                height:100%;            }            . inline_block{                Display:inline-block;                Vertical-align:middle;            }

Life has how many helpless and regret, but also have what kind of sorrow and sadness?
Rain-soaked desolate and Cang Chu must be water, quietly through the days of youth struggle and touch the ideal years.

Pros: Supports responsive, variable-height support

Cons: Additional markings are added

　　

6, Line-height Way

This method applies only to single-line text where the case is relatively simple, and the Line-height setting is the height of the element.

Principle: If the line-height height is greater than font-size, the height of the browser will be divided between the text and the end.

            <class= "Single_line">                 actually each of us lives is a world, Even the most ordinary people have to fight for the world that he lives in.             </ Div >

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

In fact, each of us life is a world, even the most ordinary people to his life for the world and struggle.

Advantages: Simple and clear

Cons: Only applicable to single-line text, large limitations

7, Flexible box-type layout

Use the flexible box layout to align the spindle and side axes of a word element to the center

Principle: Using CSS Elastic box

        <Divclass= "Container Is-flexbox">            <Divclass= "Center">It is necessary to be down-to- Earth in real life, and occasionally out of reality to the ideal high platform to look at. <BR>in the spiritual world to build a full set of systems, to lead us not lost and not slack. <BR>When we wake up, fall in reality, can bravely bear the burden of life without complaining. <BR>This is the truth that Sun Shaoping taught me. <BR>The hard work can only always be regarded as the necessity of life, even if there is no hope of harvest, but also the peace of mind to continue to cultivate. <BR>to do this, the road is long. </Div>        </Div>

View Code

. 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;}

It is necessary to be down-to-earth in real life, and occasionally out of reality to the ideal high platform to look at.
In the spiritual world to build a full set of systems, to lead us not lost and not slack.
When we wake up, fall in reality, can bravely bear the burden of life without complaining.
This is the truth that Sun Shaoping taught me.
The hard work can only always be regarded as the necessity of life, even if there is no hope of harvest, but also the peace of mind to continue to cultivate.
To do this, the road is long.

Pros: True Vertical Center Layout

Cons: Ie11 only starts to support flex layouts

CSS Vertical Centering Summary