居中效果展示

代码展示：

[html]

<div class="centerbox"></div>

[css]

*{
   margin: 0;
   padding: 0;
}
   html,body {
   height: 100vh;
}
.centerbox {
   width: 100px;
   height: 80px;
   background: yellow;
   position: absolute;/*绝对定位*/
   left: 50%;/*距离左侧50%*/
   top: 50%;/*距离顶部50%*/
   margin-left: -50px;/*向左移动自身的50%*/
   margin-top: -40px;/*向顶移动自身的50%*/
}

其中这两句：

margin-left: -50px;/*向左移动自身的50%*/
   margin-top: -40px;/*向顶移动自身的50%*/

也可以换种写法，用transform向左和顶移动自身的50%，效果相同。

transform: translate(-50%,-50%);
   /*定义2D转换，向左和顶移动自身的50%*/