div+css垂直居中的五种实现方法
发布时间:2014-09-12 10:16:09 作者:佚名
我要评论

之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少。不过最近有人问了几个例子。现在就把我经验拿出来分享一下,希望大家鼓鼓掌。
方法一:把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align属性。
结构效果如下:
CSS
复制代码
代码如下:div#wrapper {
display: table;
width: 500px;
height: 500px;
background-color: #c00;
}
div#row {
display: table-row;
}
div#cell {
display: table-cell;
vertical-align: middle;
}
html
复制代码
代码如下:<div id="wrapper">
<div id="row">
<div id="cell">
If you want to sell sugar water for the rest of my life or want a chance to change the world
</div>
</div>
</div>
优点:不用受内容高度的限制,简单实现垂直居中;
缺点:不兼容ie6,7
方法二:这个方法使用绝对定位的 div,把它的 top 设置为 50%,margin-top 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。
结构效果如下:
CSS
复制代码
代码如下:div#wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #c00;
}
div#content {
position: absolute;
top: 50%;
left: 0;
width: 400px;
height: 300px;
margin-top: -150px;
background-color: pink;
}
html
复制代码
代码如下:<div id="wrapper">
<div id="content">
</div>
</div>
优点:兼容性好
缺点:必须知道内容盒子的高度才可以,有了这点限制;
方法三:这个方法和方法二的原理是一样的。废话不多说看代码
CSS
复制代码
代码如下:.wrap {
height: 500px;
width: 500px;
background-color: pink;
}
.additional {
height: 50%;
margin-bottom: -120px;
}
#content {
height:240px;
width:70%;
background-color: #000;
}
HTML
复制代码
代码如下:<div class="wrap">
<div class="additional"></div>
<div id="content">
</div>
</div>
优缺点和法二一样,缺点嘛多了个额外的标签;
方法四:这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。
结构效果如下:
CSS
复制代码
代码如下:#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
background-color: #000;
}
HTML
复制代码
代码如下:<div id="content">
Content here</div>
优点:非常简单
缺点:不兼容ie6,7
方法五:这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。这个就不用实例了,您你看就明白;
相关文章
- 下面小编就为大家带来一篇关于div中img,span垂直居中的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-09-26
- 这篇文章主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-07-05
- 这篇文章主要介绍了CSS文本和div垂直居中方法总结,包括多行文本垂直居中,单行文本垂直居中,子div垂直居中,感兴趣的小伙伴们可以参考一下2016-07-04
- 这篇文章主要介绍了CSS在固定宽高的div内实现垂直居中的实例详解,即在div内部元素相对于div垂直居中的方法,需要的朋友可以参考下2016-06-03
- 这篇文章主要为大家详细介绍了CSS教程之div垂直居中的多种方法,还包括多行文本垂直居中的方法,感兴趣的小伙伴们可以参考一下2016-05-05
- 下面小编就为大家带来一篇让DIV水平垂直居中的两种完美方法推荐。一起跟随小编过来看看吧。希望给大家一个参考2016-03-15
- 这篇文章主要介绍了让Div实现水平或垂直居中的相关方法,包括使用js来对实际产生的居中问题进行修正的方法,需要的朋友可以参考下2015-08-06
- 对于页面上的块级元素,只须定宽及设置margin:auto 0;即可在垂直上居中,但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢,今天我们来探讨下。2014-09-12
- 下面小编就为大家带来一篇不定宽高的文字在div中垂直居中实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-03-30
最新评论