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;