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

CSS垂直居中

2016-03-20 13:36 701 查看

注：本文示例来自于百度前端学院的一个任务

// 本文的dom结构
<body>
<div class="container"></div>
</body>
// 共用css
*{
margin: 0px;
padding: 0px;
}
.container{
width: 400px;
height: 200px;
background: #ccc;
}

第一种的方式个人认为最为巧妙，也是比较难以理解的：

先上代码：

html, body{
height: 100%;
}
.container{
margin: auto;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

很多人都会惊呼这种垂直居中的方式，我想假若我们要实现水平居中那是很简单的只需要代码

margin: auto;

，但是我们仔细地想一想，这种方式为什么只能够使水平居中，而不能使垂直方向上居中，并且这种水平居中的原理是什么呢？

为什么

margin: auto

不能使垂直居中？

这里引用一下杜瑶大神（杜瑶个人站：http://www.doyoe.com/）的话：

keyword auto默认是使用剩余空间，所以不论left还是right定义了auto，计算值都会是包含块的剩余空间，如果左右都设置了auto，那么就会均分剩余空间。当然，这指的是书写模式为lr-tb的情况下，这种情况，宽度是一定的。至于纵向，高度其实是没有一个固定值，auto无可refer的参照物，如果top或bottom设置了auto，那计算值其实会是0。

我想杜瑶大神解释的已经很明了了，也是就是说我们的通常的书写模式是，自左至右，自上至下，在这种模式下，宽度是一定的(ps:个人认为如div的流体特性就是一个很好的体现)，但是我们的高度没有一个固定值，说白了我们上面的代码就是相当于

margin: 0 auto;

解决了第一个问题，那么为什么加上

position: absolute; left: 0px;right: 0px;top: 0px;bottom: 0px;

之后就可以了呢？

好那么来一点一点的理解，首先要理解的是

position: absolute;

，网上很多的面试题会问相对定位于绝对定位的区别。

我个人认为，区别有一下几点：

1. 绝对定位脱离文档流，而相对定位仍在正常流中；

2. 绝对定位相对于离它最近的非

position

值为

static

的祖先节点的左上角定位，最终

root

为浏览器的可以窗口。而相对定位是相当于节点自身的左上角来做定位。

理解了这个问题的话，我们来看一下

left: 0px;right:0px;top:0px;bottom:0px;

的效果，这个效果就是为把我们的

container

节点的外边距拉到与浏览器可视口距离为0的位置，然后在结合上面杜瑶大大的那番话，我们就可以很好的理解为什么可以垂直居中，水平居中了。

第二种方式就是利用我们css3中的一个新特性，那就是运用

flex

布局，这种布局的入门可以参见/article/9771936.html这边博客，下面我们就直接来看代码实现：

html, body{
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
}

这种垂直居中水平居中的实现方式固然简单，但是代价也是比较高的，我们的兼容性是ie11+。

第三种实现方式，也是大家会普遍采用的方式：

body{
position: relative;
}
.container{
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0px 0px -200px;
overflow: hidden;
}

第四种方式：

margin

与

relative

相结合：

.container{
position: relative;
top: 50%;
margin: -100px auto 0px;
}

第五种方式：利用css3的新特性

transform

.container{
position: relative;
top: 50%;
margin: 0 auto;
transform: translateY(-50%);
overflow: hidden;
}

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

标签：

相关文章推荐

新的分享

章节导航