将元素水平垂直居中，只写top:50% left:50%显然不对

一、通过设置margin-left，maigin-top为负数改变位置

#box1{
    height:200px;
    width:200px;
    position: absolute;
    left:50%;
    top:50%;
    background-color: aquamarine;
    margin-left: -100px;
    margin-top:-100px;
   /*transform: translate(-50%,-50%);*/
}

二、利用transform里面的translate属性

Transform是css制作动画的属性之一。css3的动画属性：变形(transform)、转换(transition)和动画(animation)。transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

我们使用的就是translate

#box1{
    height:200px;
    width:200px;
    position: absolute;
    left:50%;
    top:50%;
    background-color: aquamarine;
    /*margin-left: -100px;
    margin-top:-100px;*/
   transform: translate(-50%,-50%);
}

transform：translate（-50%,-50%)是把元素沿着横向x轴,y轴移动自身宽度的50%，一般是从左侧为开始点也就是0点。而数值是-50%，所以是从左侧0点向左移动自身宽度的50%，向上移动自身宽度的50%。