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>

Answer 1

属性中声明的相对定位background-position考虑了被定位图像的尺寸，而当使用 CSS 位置属性 ( top,right,bottom,left) 时，只考虑相对父级的尺寸。

考虑它的一个好方法是使用最小值和最大值：

1. 使用 0% 时，效果相同：
   • 背景定位图像紧贴包含元素的左边缘
   • 绝对定位元素拥抱相对父元素的左边缘
2. 100%，效果明显不同：
   • 背景定位图像紧贴包含元素的右边缘
   • 绝对定位元素的左边缘与相对父元素的右边缘对齐

为了解决您的问题，您可以将元素宽度的一半的负边距添加到第二个 div：

margin-left: -70px;

Answer 2

孩子的左侧div将与父母div的一半交叉left: 50%;。集中儿童div使用left: 50%;和margin-left: -(half the width of child div)

Answer 3

为了简单起见，我建议简单地删除position:absolute;top:0;left:50%;和使用margin: 0 auto;。