css垂直居中实现方法大全

swmozowtfl · *发表于* 2015-7-9 23:02:58

摘要：
在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。
line-height：
代码如下:
<style>
.content {
height:240px;
line-height: 240px;
}
</style>
<div class=content>
vertical-align:middle;
</div>
:before：
代码如下:
<style>
.content {
height: 240px;
}
.child:before {
content: ' ';
display: block;
height: 120px;
}
</style>
<div class=content>
<div class=child>
vertical-align:middle;</p> <p></div></div>
padding-top：
代码如下:
<style>
.content {
height:240px;
}
.child {
padding-top: 120px;
}
</style>
<div class=content>
<div class=child>
vertical-align:middle;
</div>
</div>
position:absolute：
代码如下:
<style>
.content {
position:absolute;
height:240px;
}
.child {
position: relative;
top:50%;
}
</style>
<div class=content>
<div class=child>
vertical-align:middle;
</div>
</div>
display:table-cell;
代码如下:
<style>
#content {
display:table;
}
#child {
display:table-cell;
vertical-align:middle;
height: 300px;
}
</style>
<div id=content>
<div id=child>
vertical-align:middle;
</div>
</div>
小结：
以上代码本人是在chrome下做的测试，可能有些在ie下会有问题，使用时请注意。

更多网页制作信息请查看：网页制作

mwxny · *发表于* 2016-1-19 10:39:09

哦~~~明白了....

Acropozelan · *发表于* 2016-1-19 10:39:15

这是安慰我啊~~还是垮我啊???怎么感觉又被扁了啊

tohme · *发表于* 2016-1-19 10:39:26

要睡觉了呵呵

bqtklouu · *发表于* 2016-1-19 10:39:57

楼主，你要继续努力啊！你是bbs的希望啊！你是网络文学的希望啊！你是整个网络界的希望文学界的希望啊！你是整个人类的希望啊！你是整个太阳系的希望啊！你是整个异次元空间的希望啊！

alapScady · *发表于* 2016-1-24 13:01:18

晚安别让小嫁再郁闷了 -

gevaemaidovef · *发表于* 2016-1-24 13:01:23

看起来好~~像啊~~~~~

Mqokjdvq · *发表于* 2016-1-24 13:02:09

呵呵都没人想我~~

wwdu926a · *发表于* 2016-1-24 13:02:18

哈你逗逗他啊

mwxny · *发表于* 2016-1-24 13:02:23

我不是来抢沙发的，也不是来打酱油的。

css垂直居中实现方法大全

猜你喜欢

回复|共 9 个

回复

快捷导航