CSS中三张图片居中求助：<center>标签无效问题

嘿，问题的核心在于你给图片设置了position: absolute！绝对定位的元素会完全脱离正常的文档流，这就导致<center>标签根本没法控制它们的位置——毕竟<center>只能影响处于文档流中的元素。咱们来调整代码，实现你想要的居中对齐+层级效果：

步骤1：替换容器，用现代布局方式 #

把原来的<center>标签换成一个容器div，用Flex布局来实现整体居中，这样比<center>更灵活可控：

<div class="img-container">
  <img class="imgA1" src="/resources/images/loading_screen/13__-6PX._-69w.png">
  <img class="imgB1" src="/resources/images/loading_screen/photo<?php echo rand(1, 29); ?>.png">
  <img class="imgC1" src="/resources/images/loading_screen/12__-6PX._-NC.png">
</div>

步骤2：修改CSS，移除绝对定位 #

把图片的position: absolute换成position: relative，这样既保留了z-index层级控制的能力，又能让图片留在文档流中，容器的居中样式就能生效了。同时调整偏移方式（用left/top替代无效的负padding）：

/* 容器样式：实现内部元素水平居中 */
.img-container {
  display: flex;
  justify-content: center;
  /* 如果需要垂直居中，可以加上下面这行 */
  /* align-items: center; */
  position: relative; /* 让内部相对定位的元素以容器为基准 */
}

/* 重置图片的基础样式 */
.img-container img {
  position: relative; /* 替换absolute，保留层级控制 */
  top: 0;
  left: 0;
}

/* 各图片的层级和位置调整 */
.imgA1 {
  z-index: 1;
}

.imgB1 {
  z-index: 3;
  left: 95px;
  top: 50px;
}

.imgC1 {
  z-index: 4;
  left: -5px;
  top: -25px;
}

关键说明 #

1. 为什么<center>没用？：绝对定位元素脱离文档流，容器的对齐规则对它们完全不生效，必须让图片回到文档流中才能被居中控制。
2. 为什么用relative？：相对定位不会脱离文档流，同时允许通过left/top调整元素位置，z-index也能正常控制叠加层级。
3. 负padding的问题：CSS中padding的负值是无效的，所以你原来的padding-left:-5px根本起不到偏移作用，用relative下的left负值才是正确的做法。

如果坚持想用<center>标签，也可以保留它，但必须移除图片的position: absolute，不过Flex布局是现在更推荐的方案哦~

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