css - 图像背景位置到 50% 使背景图像居中，但定位的元素没有

Question

图像背景位置向左 50% 使背景图像居中，但在绝对定位元素中左 50% 不使 div 元素居中，为什么？

这是代码：

 <div style="position:relative;height:100px; background:url(images/demo.jpg) no-repeat 50% 0">
      <div style="min-height:40px; width:140px; background-color:#aaa;position:absolute;top:0;left:50%;">
            heloo this is just a demo
      </div>
  </div>

运行这段代码！

Answer 1

没有代码很难理解你的问题，但是......

绝对定位元素将相对于其父元素定位它。确保父元素应用了正确的布局（宽度、高度position: relative等），您应该会看到不同之处。

Answer 2

将 img 设为块元素并将其浮动到左侧。

您可以使用 display: table to parent div 和 display: table-cell & vertical-align: middle to the img，这可能有助于使其居中对齐。

display: table-cell;
vertical-align: middle;