盒子box在网页中居中的方法

    一：使用绝对定位给4个方向都为0；用margin自动，实现box居中

   示例代码：

.box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    margin: auto;
}
二：采用绝对定位，定位时上边距与左边距都给50%，在利用margin属性减去当前盒子的一半宽度与高度，实现居中效果
示例代码

.box{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
}
三：利用transform:translate(-50%, -50%)方法实现居中，此方法适用于不知width、height的情况下
示例代码：

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
}

视图效果：