块级元素居中

1.已知块级元素的宽高

方式一： 利用margin

<div class="wrapper">
     <div class="box"></div>
</div>

.wrapper {
     height: 600px;
     border: 1px solid gray;
}
.box {
     width: 100px;
     height: 100px;
     background: gold;
     margin: 250px auto 0;
}

方式二，利用定位及负边距

.wrapper {
    height: 600px;
    border: 1px solid gray;
    position: relative;     //相对定位
}
.box {
    width: 100px;
    height: 100px;
    background: gold;
    position: absolute;  //绝对定位
    left: 50%;
    top: 50%;
    margin-left: -50px;  //宽度的一半
    margin-top: -50px;   //高度的一半
}