CSS left属性异常：<p>元素未在父容器.image-container居中

给选择器#image-list>.image-container>p设置left属性后，<p>元素未在父容器.image-container内居中，反而在#image-list中居中，不清楚问题原因。

相关代码 #

HTML

<div id="image-list">
  <div class="image-container">
    <p>hello world</p>
    <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png" draggable="false">
  </div>
</div>
<button id="btn">add image</button>

CSS

#image-list {
  display: flex;
  gap: 4vmin;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(0%, -50%);
}

#image-list>.image-container>.image {
  width: 40vmin;
  height: 56vmin;
  object-fit: cover;
  object-position: 100% center;
}

#image-list>.image-container>p {
  position: absolute;
  color: white;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  font-family: Times New Roman;
  font-size: 2rem;
  -webkit-text-stroke: 0.5px black;
}

#image-list>.image-container {
  text-align: center;
  position:relative;
}

JavaScript

btn.onclick = e => {
  list = document.getElementById("image-list");
  item = list.children[0];
  item = item.cloneNode(true);
  document.getElementById("image-list").appendChild(item);
}

问题根源在于**.image-container的宽度未被明确指定**，导致浏览器无法正确计算它的布局边界，进而让绝对定位的<p>元素定位参照意外落到了上层的#image-list上。

虽然你给.image-container设置了position: relative（这是让子元素绝对定位时以它为参照的关键），但由于父容器#image-list是flex布局，.image-container作为flex子项，默认宽度仅由内部未脱离文档流的<img>决定，浏览器的布局计算可能出现偏差，使得<p>的定位逻辑失效。

修复方法： #

1. 给.image-container明确设置宽度，和内部<img>的宽度保持一致：

#image-list>.image-container {
  text-align: center;
  position:relative;
  width: 40vmin; /* 新增，与.image的width值统一 */
}

2. 打开浏览器开发者工具，检查.image-container的样式面板，确保position: relative没有被其他CSS规则覆盖（比如是否有更高优先级的规则将其重置为position: static）。

修改后，<p>元素的left: 50%和transform: translate(-50%, -50%)会以.image-container的宽度为参照，实现容器内的精准居中。

内容的提问来源于stack exchange，提问作者120 099 101 105 110 103