为何绝对定位居中垂直方向有效，水平方向却失效？

为什么应用相同原理时，horizontal容器中的.centered div能居中，而vertical容器中的却不行？两者都是绝对定位、设置了边缘距离为0且margin: auto，但效果不同。

你的代码 #

CSS 代码

.wrapper {
  margin: 100px;
  background: lightblue;
  position: relative;
}

#vertical { 
  width: 20px;
  height: 100px;
}

#horizontal {
  height: 20px;
  width: 100px;
}

.centered {
  position: absolute;
  background: orange;
  margin: auto;
}

#horizontal .centered {
  height: 60px;
  width: 20px;  
  top: 0;
  bottom: 0;
}


#vertical .centered {
  width: 60px;
  height: 20px;  
  left: 0;
  right: 0;
}

HTML 代码

<div id="horizontal" class="wrapper">
  <div class="centered">
  </div>
</div>
<div id="vertical" class="wrapper">
  <div class="centered">
  </div>
</div>

核心原因：绝对定位margin:auto居中的规则 #

绝对定位元素用margin: auto实现居中，必须匹配对应方向的约束条件：

• 水平居中：需同时设置left: 0 + right: 0，且元素有固定width（不能是auto），此时margin: auto会自动分配左右空白，让元素水平居中。
• 垂直居中：需同时设置top: 0 + bottom: 0，且元素有固定height（不能是auto），此时margin: auto会自动分配上下空白，让元素垂直居中。

你的代码问题拆解 #

1. #horizontal 容器的 .centered
   你给它加了top: 0; bottom: 0;和固定height: 60px，满足垂直居中的条件，所以它在垂直方向相对于父容器居中（即使高度超出父容器，居中逻辑依然生效）。但你没设置水平方向的left/right: 0，所以它不会水平居中，当前是靠左对齐的。

2. #vertical 容器的 .centered
   你给它加了left: 0; right: 0;和固定width: 60px，满足水平居中的条件，所以它在水平方向相对于父容器居中（宽度超出父容器时，依然会保持居中）。但你没设置垂直方向的top/bottom: 0，所以它不会垂直居中，当前是靠上对齐的。

你觉得“vertical容器中的元素没居中”，是因为你期望它垂直居中，但代码里写的是水平居中的配置；而horizontal容器里的元素刚好触发了垂直居中，符合了你某个视觉预期。

修正方案 #

如果要让#vertical容器的元素垂直居中，修改CSS：

#vertical .centered {
  width: 20px;
  height: 20px;  
  top: 0;
  bottom: 0; /* 替换left/right为top/bottom */
}

如果要让#horizontal容器的元素水平居中，修改CSS：

#horizontal .centered {
  height: 20px;
  width: 20px;  
  left: 0;
  right: 0; /* 替换top/bottom为left/right */
}

内容的提问来源于stack exchange，提问作者Màrius Rak