如何在父div中绝对定位居中子div（垂直水平方向）

没问题，我来帮你搞定这个需求！要让innerDiv1在尺寸可变的outerDiv里垂直水平居中，同时保持它的position: absolute属性让innerDiv2能覆盖它，我们可以用transform + 相对定位的方案，这比line-height更适配容器尺寸变化的场景。

核心步骤说明： #

• 给outerDiv设置position: relative，这样innerDiv1的绝对定位会以它为基准（否则绝对定位元素会默认相对于整个文档根节点定位）。
• 对innerDiv1设置top: 50%和left: 50%，把元素的左上角移动到outerDiv的中心位置。
• 用transform: translate(-50%, -50%)，将元素向自身左上角方向移动自身宽高的50%，让元素中心点和容器中心点重合，完美适配容器尺寸变化。
• 为了让innerDiv2完全覆盖outerDiv（包括innerDiv1），给它设置position: absolute并铺满整个容器。

完整代码示例： #

CSS 代码

html, body { margin: 0; }
.wrapper { background: lightblue; width: 300px; height: 300px; }
.outerDiv { 
  background: red; 
  height: 50%; 
  width: 50%; 
  position: relative; /* 关键：让子元素绝对定位以它为参考 */
}
.innerDiv1 { 
  background: seagreen; 
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 核心居中方法 */
}
.innerDiv2 { 
  background: rgba(255,255,255,0.5); 
  position: absolute; /* 改为绝对定位确保能覆盖 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 铺满整个outerDiv */
}

HTML 代码

<div class="wrapper">
  <div class="outerDiv">
    <div class="innerDiv1">Hello World!</div>
    <div class="innerDiv2"></div>
  </div>
</div>

为什么line-height不适用？ #

你提到的line-height百分比表现不符合预期，是因为CSS中line-height的百分比值是基于元素自身的字体大小计算的，而非容器的高度。当outerDiv尺寸变化时，这种方式无法动态适配容器高度，自然达不到居中效果。而transform的方案基于元素自身宽高偏移，完全不受容器尺寸变化影响，是当前适配可变容器居中的最优解之一。

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