如何实现3张不同宽度图片叠加居中（CSS百分比+视差插件冲突）

嘿，我完全懂你这种被插件属性冲突坑到的感觉！视差插件占用了transform属性，导致你原本靠transform: translate(-50%, -50%)实现的居中失效，确实挺闹心的。别担心，这里有几个不用依赖transform的替代方案，亲测好用：

把所有图片塞进一个Flex容器，利用Flex的原生居中属性，彻底绕开transform：

/* 外层容器 */
.image-stack-wrapper {
  position: relative;
  width: 60%; /* 你需要的容器宽度 */
  margin: 0 20%; /* 左右边距留白 */
  display: flex;
  justify-content: center; /* 水平居中 */
  /* 如果需要垂直居中，再加下面这行 */
  /* align-items: center; */
  /* 记得给容器设置高度，或者让图片自动撑起高度 */
  min-height: 400px;
}

/* 每张叠加的图片 */
.image-stack-wrapper img {
  position: absolute;
  /* 给不同图片设置差异化宽度 */
}

/* 示例：给三张图分别设置宽度 */
.image-stack-wrapper img:nth-child(1) {
  width: 100%;
  z-index: 1;
}
.image-stack-wrapper img:nth-child(2) {
  width: 80%;
  z-index: 2;
}
.image-stack-wrapper img:nth-child(3) {
  width: 60%;
  z-index: 3;
}

Flex容器的justify-content: center会自动让内部绝对定位的元素水平居中，完全不需要transform来帮忙，完美避开和视差插件的属性冲突。

如果不想用Flex，这个经典方法也能搞定：

.image-stack-wrapper {
  position: relative;
  width: 60%;
  margin: 0 20%;
  min-height: 400px; /* 必须设置高度，否则绝对定位元素会脱离文档流 */
}

.image-stack-wrapper img {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto; /* 自动分配左右边距，实现水平居中 */
}

/* 同样给不同图片设置宽度和层级 */
.image-stack-wrapper img:nth-child(1) {
  width: 100%;
  z-index: 1;
}
.image-stack-wrapper img:nth-child(2) {
  width: 80%;
  z-index: 2;
}
.image-stack-wrapper img:nth-child(3) {
  width: 60%;
  z-index: 3;
}

原理是当绝对定位元素同时设置left:0和right:0时，margin:auto会强制浏览器把元素水平居中，完全不依赖transform。

如果你实在想保留transform: translate的写法，可以尝试提升样式优先级，比如给你的图片加一个专属类，再用!important强制覆盖插件样式：

.image-stack-wrapper img.custom-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  width: /* 你的百分比宽度 */
}

不过要注意，!important可能会引发其他样式冲突，所以优先试试前两个方案，这个作为备选。

最后提醒一下，叠加图片的时候一定要用z-index控制层级，避免图片顺序混乱哦！

内容的提问来源于stack exchange，提问作者DavidWHG