如何让一个div在页面正中

如何让一个div在页面正中

我今天说的是让一个div水平居中同时垂直居中，而不是简单的top：50%，left：50%。当然，我们就按一开始的思路写一下：top，left属性都设为50%，现在我们只需tanslate(-50%,-50%)就可以达到div既水平居中同时垂直居中。

{

　　position: absolute;

　　left: 50%;

　　top: 50%;

　　background: #CCCCCC;

　　width: 400px;

　　height: 200px;
     transform: translate(-50%,-50%);

}

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数