简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

CSS垂直居中实现方法大全

来源:易贤网   阅读:736 次  日期:2015-01-28 14:37:20

温馨提示:易贤网小编为您整理了“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下会有问题,使用时请注意。

更多信息请查看IT技术专栏

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:CSS多列布局实现方法大全
下一篇:浅谈Span和Div的区别
易贤网手机网站地址:CSS垂直居中实现方法大全
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!