absolute定位下的margin居中失效

在绝对定位时,css样式中设置margin:0 auto;失效问题,例子如下:

.middle-div {
    width: 100px;
    height: 100px;
    position: absolute;
    margin: 0 auto;
}

如上的方式并不能实现元素的水平居中。而采用相对定位则可以:

.middle-div {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
}

然而,absolute定位下,margin是可以工作的,例如

.middle-div {
    width: 100px;
    height: 100px;
    position: absolute;
    margin-left: 50%;
}

这样元素的确能相对父元素向右移动父元素宽度的50%。

一般对于absolute定位的元素,我们居中的方式为:

.middle-div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

还有有趣的一点是,如下代码,也能实现absolute定位元素的水平居中:

.middle-div {
    width: 100px;
    height: 100px;
    positon: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

这其中的原理,上网搜索了很多内容,但都没有讲清楚,后续将继续研究,今天暂且做个记录。

如何学习react

react 有哪些最佳实践?