水平垂直居中

问题：怎样实现一个盒子在未知容器里面水平垂直居中？

方法：首先盒子有个宽高，然后给盒子一个定位（相对或者绝对），设置top:50%;left:50%;通常情况下我们会以为top:50%;left:50%;就会是盒子居中，其实并不是。因为盒子是有宽高的，这样只会让盒子的左上角在其父级的中心点上，所以要在设置top 和 left属性之后，让这个盒子的margin-top,margin-left值分别为其本身宽高的一半，并且值为负。代码如下：

div {

width:100px;

height:100px;

border: 1px solid black;

position: relative;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

}