CSS3实现垂直居中
1、首先编写两个div，并用边框和背景区分开
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
}
.block{
width: 50px;
height: 50px;
background-color: #ccf;
}
</style>
<div class="box">
<div class="block"> </div>
</div>
效果如下：
2、接着设置水平居中，在.block中添加margin: 0px auto;
.block{
width: 50px;
height: 50px;
background-color: #ccf;
margin: 0px auto;
}
效果如下:
3、然后我们可以天真一次，尝试修改刚才添加的代码为argin: auto auto;
.block{
width: 50px;
height: 50px;
background-color: #ccf;
margin: auto auto;
}
然后，效果...依然是之前的那个鬼样子：
4、所以这么设置是无效的，那么我们该如何实现垂直居中呢？且看如下代码：
.block{
width: 50px;
height: 50px;
background-color: #ccf;
margin: 0px auto;
position: relative;
top: 50%;
}
没错，将元素定位到父元素50%处，先看效果：
5、等等，请先别喷...我想你应该是可以想明白为什么是这样子的。但是这又怎么办呢？且看我再加一行代码：
.block{
width: 50px;
height: 50px;
background-color: #ccf;
margin: 0px auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
说是一行代码，实际上加了5行，但是我们就是这么任性，好了，再来看效果：
6、好了，大功告成