以保证金为中心的div：auto不工作

Question

嗨我在嵌套div中没有​​关于中心div的正确概念。这是我的html。我想以白色背景为中心。

 <div class="div1">
    <div class="img"></div>
</div>
<div class="div2">

</div>

和CSS

.div1{
    width :100%;
    height: 300px;
    background-color: black;
    position: relative;
}
.img{
    width: 100px;
    height: 100px;
    position: absolute;
    background-color : white;
    display: block;
    margin:  auto;
    bottom: 0%;
    margin-bottom: -50px;
    text-align: center;

}
.div2{
    width :100%;
    height: 300px;
    background-color: #e65100;
}

我尝试使用text-align：center来居中div，但它无效。 输出在这里

Answer 1

.img {
   ...
   left: 0;
   right: 0;
}

小提琴：https://jsfiddle.net/ep9co5g5/

Answer 2

您可以使用left和translateX来居中，因为您使用绝对位置，

您需要将此css添加到 .img

left:50%;
transform:translateX(-50%);

请参阅代码段：

.div1{
    width :100%;
    height: 300px;
    background-color: black;
    position: relative;
}
.img{
    width: 100px;
    height: 100px;
    position: absolute;
    background-color : white;
    bottom: 0%;
    margin-bottom: -50px;
    left:50%;
    transform:translateX(-50%);

}
.div2{
    width :100%;
    height: 300px;
    background-color: #e65100;
}

<div class="div1">
    <div class="img"></div>
</div>
<div class="div2">

</div>

Answer 3

＆＃13;

＆＃13;

.div1{
    width :100%;
    height: 300px;
    background-color: black;
    position: relative;
}
.img{
    width: 100px;
    height: 100px;
    position: absolute;
    background-color : white;
    display: block;
    margin:  auto;
    bottom: 0%;
    margin-bottom: -50px;
    text-align: center;
    left:0;
    right:0;

}
.div2{
    width :100%;
    height: 300px;
    background-color: #e65100;
}

＆＃13;

<div class="div1">
    <div class="img"></div>
</div>
<div class="div2">

</div>

＆＃13;

＆＃13;

＆＃13;