总结CSS3的新特性来总结垂直居中的实现方法分享

来源：动视网责编：小采时间：2020-11-27 18:52:43

总结CSS3的新特性来总结垂直居中的实现方法分享

总结CSS3的新特性来总结垂直居中的实现方法分享:CSS3中的flex布局和before伪元素等特性用来实现垂直居中真的是太方便和优雅了,这里我们就来总结CSS3的新特性来总结垂直居中的实现方法分享:0.单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 heigh

推荐度：

点击下载本文 文档为doc格式

导读总结CSS3的新特性来总结垂直居中的实现方法分享:CSS3中的flex布局和before伪元素等特性用来实现垂直居中真的是太方便和优雅了,这里我们就来总结CSS3的新特性来总结垂直居中的实现方法分享:0.单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 heigh

CSS3中的flex布局和before伪元素等特性用来实现垂直居中真的是太方便和优雅了,这里我们就来总结CSS3的新特性来总结垂直居中的实现方法分享:

0.单行内容的居中
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了

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

优点：
（1）. 同时支持块级和内联极元素
（2）. 支持所有浏览器
缺点：
（1）. 只能显示一行
（2）. IE中不支持<img>等的居中
要注意的是：
（1）. 使用相对高度定义你的 height 和 line-height
（2）. 不想毁了你的布局的话，overflow: hidden 一定要
为什么？
请比较以下两个例子：

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

上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。

1.使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

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

2.利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;

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

3.利用display:table-cell属性使内容垂直居中;

.box{ 

display:table-cell; 

vertical-align:middle; 

text-align:center; 

width:120px; 

height:120px; 

background:purple; 

}

4.使用css3的新属性transform:translate(x,y)属性;

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

5.最高大上的一种，使用:before元素;

.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布局;

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

总结CSS3的新特性来总结垂直居中的实现方法分享

推荐度：

点击下载本文 文档为doc格式

标签：方法 css css3

热门焦点

总结CSS3的新特性来总结垂直居中的实现方法分享

总结CSS3的新特性来总结垂直居中的实现方法分享

总结CSS3的新特性来总结垂直居中的实现方法分享

最新推荐

猜你喜欢

热门推荐