Summarize the new features of CSS3 to summarize the implementation methods of vertical centering.

Features such as flex layout and before pseudo-element in CSS3 are really convenient and elegant to implement vertical centering. Here we will summarize the new features of CSS3 and summarize the implementation methods of vertical centering:

0. Centering of single-line content
It is easiest to only consider a single line. Regardless of whether the container has a fixed height, just set line-height and height to the container, make the two values ​​​​equal, and add Just over-flow: hidden

.middle-demo-1{   
height: 4em;   
line-height: 4em;   
overflow: hidden;   
}

Advantages:
(1). Supports both block-level and inline elements
(2). Supports all browsers
Disadvantages:
(1). Only one line can be displayed
(2). IE does not support centering of etc.
Note that:
(1). Use relative height to define your height and line-height
(2). If you don’t want to ruin your layout, overflow: hidden must
Why?
Please compare the following two examples:

<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br/>
<br/>
<p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

The previous height is in the absolute unit of px, and there is no hidden overflow. The unit of the next height is in the relative unit. em, and hide the overflow. If your browser supports enlarging fonts, go ahead and see what happens.

1. Use position:absolute(fixed) to set the properties of left, top, margin-left, margin-top;

.box{   
    position:absolute;/*或fixed*/
    top:50%;   
    left:50%;   
    margin-top:-100px;   
    margin-left:-200px;   
}

2. Use the position:fixed (absolute) attribute, margin:auto must not be forgotten;

.box{   
    position: absolute;或fixed
    top:0;   
    rightright:0;   
    bottombottom:0;   
    left:0;   
    margin: auto;   
}

3. Use the display:table-cell attribute to center the content vertically;

.box{   

display:table-cell;   

vertical-align:middle;   

text-align:center;   

width:120px;   

height:120px;   

background:purple;   

}

##4. Use the new attribute transform:translate(x,y) attribute of css3;

.box{   
    position: absolute;   
    transform: translate(50%,50%);   
    -webkit-transform:translate(50%,50%);   
    -moz-transform:translate(50%,50%);   
    -ms-transform:translate(50%,50%);   
}

5. The highest one, use: before element;

.box{   

position:fixed;   

display:block;   

background:rgba(0,0,0,.5);   

}   

.box:before{   

content:'';   

display:inline-block;   

vertical-align:middle;   

height:100%;   

}   

.box.content{   

width:60px;   

height:60px;   

line-height:60px;   

color:red;

6.Flex layout;

.box{   
    display: -webkit-box;   
    display: -webkit-flex;   
    display: -moz-box;   
    display: -moz-flex;   
    display: -ms-flexbox;   
    display: flex;   
    水平居中   
    -webkit-box-align: center;   
    -moz-box-align: center;   
    -ms-flex-pack:center;   
    -webkit-justify-content: center;   
    -moz-justify-content: center;   
    justify-content: center;   
     垂直居中    
    -webkit-box-pack: center;   
    -moz-box-pack: center;   
    -ms-flex-align:center;   
    -webkit-align-items: center;   
    -moz-align-items: center;   
    align-items: center;   
}

The above is the detailed content of Summarize the new features of CSS3 to summarize the implementation methods of vertical centering.. For more information, please follow other related articles on the PHP Chinese website!