利用绝对定位使盒子居中

利用绝对定位使盒子居中

若想设置水平居中：

1.元素先设置绝对定位，把left设置成50%
2.然后把margin-left设置成盒子宽度的一半

.Mbox {
            position: relative;
            left: 50%;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
}
<div class="Mbox"></div>

同理，若想设置水平居中：

1.元素先设置绝对定位，把top设置成50%
2.然后把margin-top设置成盒子高度的一半

.Mbox {
            position: relative;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
}
<div class="Mbox"></div>

同理，若想设置垂直水平居中，把上述结合起来即可