使用百分比而非绝对值实现绝对定位div在父元素下方居中

当然可以！完全不用依赖固定的像素值，利用CSS的定位特性就能实现自适应的父元素下方居中，不管父元素或子元素的尺寸怎么变，都不需要手动调整定位参数。下面给你两种实用的方案：

方案1：利用transform实现精准居中 #

这个方案的核心是用left: 50%对齐父元素水平中点，再通过transform: translateX(-50%)让子元素自身偏移一半宽度，实现完美居中；同时用top: 100%让子元素顶部紧贴父元素底部。

完整代码 #

<div id="outer"> <div id="hover"></div> </div>

#outer {
 width: 200px;
 height: 200px;
 background: blue;
 position: relative;
}
#hover {
 width: 50px;
 height: 50px;
 background: yellow;
 position: absolute;
 left: 50%; /* 子元素左边缘对齐父元素水平中点 */
 top: 100%; /* 子元素顶部紧贴父元素底部 */
 transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现水平居中 */
}

优势：完全不依赖元素的具体尺寸，哪怕你把父元素改成300px宽，子元素改成80px宽，居中效果依然自动生效。如果想让子元素和父元素之间留间距，只需要把top改成calc(100% + 10px)，或者给子元素加margin-top: 10px就行。

方案2：利用margin: auto实现兼容式居中 #

如果你需要兼容一些不支持transform的老式浏览器（现在这种场景很少见了），可以用这个方案：通过left: 0和right: 0让子元素的水平范围充满父元素，再用margin: 0 auto自动分配左右外边距，实现居中；同样用top: 100%固定垂直位置。

完整代码 #

<div id="outer"> <div id="hover"></div> </div>

#outer {
 width: 200px;
 height: 200px;
 background: blue;
 position: relative;
}
#hover {
 width: 50px;
 height: 50px;
 background: yellow;
 position: absolute;
 left: 0;
 right: 0;
 margin: 0 auto; /* 自动分配左右外边距，实现水平居中 */
 top: 100%; /* 子元素顶部紧贴父元素底部 */
}

优势：兼容性更好，逻辑直观，同样支持尺寸自适应调整。

这两种方案都彻底摆脱了对固定像素值的依赖，完美满足你的需求！

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