CSS垂直居中实现方法大全
发布时间：2015-01-09 11:05:14 作者：佚名 
我要评论
我要评论本文给大家带来的是5种使用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下会有问题，使用时请注意。
相关文章
- 这篇文章主要给大家介绍了css实现元素水平垂直居中的两种方式，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，有需要的朋友们下面来2017-04-23
- 这篇文章主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。2016-12-19
- 这篇文章主要为大家详细介绍了css让容器水平垂直居中的7种方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-17
- 这篇文章给大家介绍了三个小节的内容，其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局，有需要的可以参考2016-09-12
- 这篇文章给大家演示了在不知道高度的情况下图片如何垂直居中对齐，文中给出了实例代码，有需要的朋友们可以参考借鉴。下面来一起看看吧。2016-09-12
- 这篇文章主要介绍了CSS定位“十字架”之水平垂直居中的相关资料，CSS如何定位“十字架”实现水平垂直居中效果，小编为大家解答，感兴趣的小伙伴们可以参考一下2016-03-02
- 这篇文章主要介绍了CSS中垂直居中的简单实现方法,包括用CSS3中用transform来实现的例子,需要的朋友可以参考下2015-07-06
- 这篇文章主要为大家介绍了CSS实现同一行的图片和文字垂直居中对齐的方法,涉及css中vertical-align:middle属性的使用技巧,需要的朋友可以参考下2015-05-12
这篇文章给大家整理四种css实现垂直居中效果，思路明了非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-09-06
最新评论