如何将元素水平居中于另一元素的中心位置？

场景说明 #

你需要让 .container-2 水平对齐到 .container-1 的中心位置，对应你给出的视觉示例：

[ . ] (未居中的随机元素 = container-1)
[.] (相对于上方元素水平居中的元素 = container-2)

修正后的基础HTML结构（替换外链图片为本地占位图）：

<div class="container-1">
  <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjMzMzIi8+Cjwvc3ZnPgo=" alt="示例图片">
</div>
<div class="container-2"></div>

以下是几种实用的实现方案：

方案1：Flexbox布局（推荐） #

通过给两个元素的父容器设置Flex布局，利用 align-items: center 实现子元素水平居中，自然让 .container-2 对齐 .container-1 的中心。

<div class="parent-container">
  <div class="container-1">
    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjMzMzIi8+Cjwvc3ZnPgo=" alt="示例图片">
  </div>
  <div class="container-2"></div>
</div>

.parent-container {
  display: flex;
  flex-direction: column; /* 垂直排列两个元素 */
  align-items: center; /* 水平居中所有子元素 */
}

.container-1 img {
  width: 200px; /* 自定义宽度，根据实际需求调整 */
  height: auto;
}

.container-2 {
  width: 80px;
  height: 80px;
  background-color: #4CAF50; /* 示例背景色，便于观察效果 */
  margin-top: 16px; /* 可选，控制两个元素的间距 */
}

方案2：定位 + Transform #

无需额外父容器，利用绝对定位和 transform 实现居中，需确保有一个相对定位的父元素（比如 <body>）作为参考。

body {
  position: relative; /* 设置定位参考 */
}

.container-1 img {
  width: 200px;
  height: auto;
  display: block; /* 消除图片默认行内元素的底部间距 */
}

.container-2 {
  position: absolute;
  left: 50%; /* 偏移到父元素的水平中点 */
  transform: translateX(-50%); /* 自身向左偏移50%宽度，实现精准居中 */
  width: 80px;
  height: 80px;
  background-color: #4CAF50;
  margin-top: 16px;
}

注意：如果 .container-1 本身不是页面居中的，这种方法需要额外计算位置，此时优先选择方案1或方案3。

方案3：Margin:auto + 自适应父容器 #

如果 .container-2 宽度固定，可通过 margin: 0 auto 实现居中，同时让父容器宽度匹配 .container-1。

<div class="parent-container">
  <div class="container-1">
    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjMzMzIi8+Cjwvc3ZnPgo=" alt="示例图片">
  </div>
  <div class="container-2"></div>
</div>

.parent-container {
  width: fit-content; /* 父容器宽度自适应 .container-1 的宽度 */
  margin: 0 auto; /* 可选，让整个父容器在页面居中 */
}

.container-1 img {
  width: 200px;
  height: auto;
}

.container-2 {
  width: 80px;
  height: 80px;
  background-color: #4CAF50;
  margin: 16px auto 0; /* 上下间距+左右auto实现居中 */
}

方案4：Grid布局 #

利用Grid的 place-items 属性快速实现居中，代码简洁直观。

<div class="parent-container">
  <div class="container-1">
    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjMzMzIi8+Cjwvc3ZnPgo=" alt="示例图片">
  </div>
  <div class="container-2"></div>
</div>

.parent-container {
  display: grid;
  place-items: center; /* 同时实现水平+垂直方向的居中对齐 */
  gap: 16px; /* 控制两个元素的间距 */
}

.container-1 img {
  width: 200px;
  height: auto;
}

.container-2 {
  width: 80px;
  height: 80px;
  background-color: #4CAF50;
}

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