实现块级元素垂直居中

代码如下

html：

   
 

css：

.content{
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%,-50%);
                        -o-transform: translate(-50%,-50%);
                       -ms-transform: translate(-50%,-50%);
                       transform: translate(-50%,-50%);
width: 400px;
min-height: 200px;
background-color: #ccc;

            }

实现原理：

  首先将块级元素  相对于浏览器 向上 向左偏移50%，这个时候块级元素的左上角位于浏览器的中心点位置。

利用transform中的translate属性将块级元素向左 向上平移块级元素的自身的50%；就可以实现元素本身的垂直居中

、

转载翻译于https://www.douban.com/note/486456092/