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

高洛峰
Release: 2017-03-09 17:43:04
Original
1269 people have browsed it

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;   
}
Copy after login

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>
Copy after login


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;   
}
Copy after login

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;   
}
Copy after login

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;   

}
Copy after login


##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%);   
}
Copy after login


5. The highest one, use: before element;

.box{   

position:fixed;   

display:block;   

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

}   

.box:before{   

content:&#39;&#39;;   

display:inline-block;   

vertical-align:middle;   

height:100%;   

}   

.box.content{   

width:60px;   

height:60px;   

line-height:60px;   

color:red;
Copy after login


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;   
}
Copy after login


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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template