得知互动

标题: css垂直居中实现方法大全 [打印本页]

作者: swmozowtfl 时间: 2015-7-9 23:02
标题: css垂直居中实现方法大全
摘要：
在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享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
哦~~~明白了....

作者: Acropozelan 时间: 2016-1-19 10:39
这是安慰我啊~~还是垮我啊???怎么感觉又被扁了啊

作者: tohme 时间: 2016-1-19 10:39
要睡觉了呵呵

作者: bqtklouu 时间: 2016-1-19 10:39
楼主，你要继续努力啊！你是bbs的希望啊！你是网络文学的希望啊！你是整个网络界的希望文学界的希望啊！你是整个人类的希望啊！你是整个太阳系的希望啊！你是整个异次元空间的希望啊！

作者: alapScady 时间: 2016-1-24 13:01
晚安别让小嫁再郁闷了 -

作者: gevaemaidovef 时间: 2016-1-24 13:01
看起来好~~像啊~~~~~

作者: Mqokjdvq 时间: 2016-1-24 13:02
呵呵都没人想我~~

作者: wwdu926a 时间: 2016-1-24 13:02
哈你逗逗他啊

作者: mwxny 时间: 2016-1-24 13:02
我不是来抢沙发的，也不是来打酱油的。

欢迎光临得知互动 (https://bbs.dezhifl.com/)