手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS垂直居中实现方法大全
CSS垂直居中实现方法大全
摘要:摘要:在我们制作页面的时候经常会遇到内容垂直居中的需求,今天分享5种垂直居中的方法,每种方法都有自己的优缺点,可以选择自己喜欢的方式。以下代...

摘要:

在我们制作页面的时候经常会遇到内容垂直居中的需求,今天分享5种垂直居中的方法,每种方法都有自己的优缺点,可以选择自己喜欢的方式。以下代码都经过本人亲自测试。

line-height:

<style>

.content {

height:240px;

line-height: 240px;

}

</style>

<div>

vertical-align:middle;

</div>

:before:

<style>

.content {

height: 240px;

}

.child:before {

content: ' ';

display: block;

height: 120px;

}

</style>

<div>

<div>

vertical-align:middle;</p> <p></div></div>

padding-top:

<style>

.content {

height:240px;

}

.child {

padding-top: 120px;

}

</style>

<div>

<div>

vertical-align:middle;

</div>

</div>

position:absolute:

<style>

.content {

position:absolute;

height:240px;

}

.child {

position: relative;

top:50%;

}

</style>

<div>

<div>

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下会有问题,使用时请注意。

【CSS垂直居中实现方法大全】相关文章:

图片垂直居中css写法兼容ie6

css中不确定高度垂直居中2种方法

实现div垂直居中的display:table-cell方法示例介绍

CSS实现圆柱型数据报表的方法

CSS实现绝对底部

CSS多列布局实现方法大全

CSS的nth-child使用方法

CSS兼容的技巧

CSS垂直居中和水平居中方法总结

CSS3动画帧数科学计算法

精品推荐
分类导航