问题:怎样实现一个盒子在未知容器里面水平垂直居中?
方法:首先盒子有个宽高,然后给盒子一个定位(相对或者绝对),设置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;
}