您的位置：首页 > Web前端 > CSS

CSS完美解决垂直居中问题

2014-04-17 22:12 316 查看

最近在写页面时候，因为要适应不同分辨率的屏幕。在放大和缩小的情况下，视图都处于居中状态，这就要设置左右垂直居中。

通常情况下我会用绝对定位来设置垂直居中，但是有个缺点就是高度变小的时候会把内容截取掉。

以下是比较兼容的一种方法。

<!DOCTYPE html>
<html>
<head>
<title>css test</title>
<meta charset="utf-8"/>
<style>
/*
* 原理： middle层对于outer层设置top：50%，middle层在outer层中间以下部分，然后inner层相对定位-50%，则向上移动             *50%。inner层就会居中。
*
*/

.outer{
height: 400px;
width: 200px;
background: #eee;
display: table;/*不支持IE6、7*/
}
.middle{ /*不设置高度则与inner高度一致*/
display: table-cell;
vertical-align: middle; /*设置垂直*/
}
/*===分开写方便理解=======兼容方案hack*/
.outer{
*position: relative;
}
.middle{
*position: absolute;
*top:50%;
}
.inner{
*position: relative;
*top: -50%;
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">需要垂直的内容</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航