[分享]css中如何定位图片位置不变

CSS中定位图片的位置是非常常见的操作，但如果需要让图片的位置保持不变，就需要特别注意了。img { : absolute; top: 100px; left: 100px; } 上面的代码将图片定位...

CSS中定位图片的位置是非常常见的操作，但如果需要让图片的位置保持不变，就需要特别注意了。

img {
  position: absolute;
  top: 100px;
  left: 100px;
} 

上面的代码将图片定位在页面的(100px, 100px)处，但如果用户缩放了页面或是在移动设备上浏览网站，图片的位置会随之改变。

为了避免这种情况，我们需要使用相对于父元素的百分比来定位图片：

.container {
  position: relative;
  width: 500px;
  height: 500px;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

上述代码中，我们创建了一个宽高为500px的父元素并将其定位方式设置为relative，然后使用50%的top和left值来定位图片在父元素的中心点处，并使用transform属性将图片向左和向上移动自身宽高的一半，从而保持图片在父元素中心的位置。

这样一来，无论用户如何缩放页面，图片的位置都将始终固定在父元素的中心点处。