注：本文示例来自于百度前端学院的一个任务
// 本文的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布局，这种布局的入门可以参见http://blog.csdn.net/zp1996323/article/details/50611462这边博客，下面我们就直接来看代码实现：
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;
}
扫一扫
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
