CSS篇之3. 如何保持浮层水平垂直居中

垂直水平居中是日常前端开发当中一个常见的需求，在支持 CSS3 属性的现代浏览器当中，有一个利用 CSS3 属性的垂直水平居中方法：

.center {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

上面的例子，无论我们怎样调整窗口的大小，红色方块始终会在窗口垂直、水平居中。

原理

为了解释原理，我们创建两个元素:

<div id="outer">
<div id="inner">
</div>
</div>

先不加上 transform 属性：

#outer {
position: relative;
width: 500px;
height: 500px;
border: 2px solid yellow;
}

#inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
}

可以看到红色方块左、上方距离外层方块的距离都是250个像素，如果我们想实现垂直水平居中，就应该将红色方块的中心点移动到目前元素左上角的位置，也就是分别向上和向左移动一半方块边长的长度，50个像素。

#inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

水平垂直居中实现代码

.parent {
width: 200px;
height: 200px;
background-color: black;
}
.child {
position: relative;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
background-color:red;
-webkit-transform: translate(-50%, -50%) ;
-moz-transform: translate(-50%, -50%) ;
-ms-transform: translate(-50%, -50%) ;
-o-transform: translate(-50%, -50%) ;
transform: translate(-50%, -50%) ;
}

以往，弹出层水平垂直居中我们往往用js实现，现在可以用css3来完成了。而且用这种方法弹出层不需要设置高度，很方便。