CSS实现垂直水平居中

实现方法

1.absolute+transform（代码最简单）

transform：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

样式表如下

<style type="text/css"> 
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽度和高度的一半
    border: 1px solid blue;
}
</style>

解释：

1）只有absolute  

 position: absolute; top: 50%;   left: 50%;  background:blue;   width:500px; height:500px;

块级元素container，left:50%是指子元素在父元素左边框开始右移父元素的50%（相当于子元素右移父元素50%的长度？）

top：50% 同

效果如图

可知若要使块级元素div垂直水平居中需要将向左移动一半，向上移动一半

所以

 transform: translate(-50%, -50%); 

效果如图

2.absolute

  div{
            width:600px;
            height: 600px;
            background:green;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-300px;
            margin-top:-300px;
        }