有不同的方法可以做到这一点,但我发现最简单的方法是对abolute定位元素执行以下操作：
top: 0;
left: 50%;
transform: translateX(-50%);
使用此方法,您无需知道任何元素的大小.
它是如何工作的？
左边：50％将它放在祖先元素的中间(这里100％是祖先元素的大小).
变换：translateX(-50％)使绝对定位元素的中心到达左角的位置(此处100％是绝对定位元素的宽度).
为了使这项工作,父元素与按钮具有相同的宽度也很重要.我使用了一个父元素来包含按钮和aboslutely定位元素i,以便top：0直接位于按钮下方.
简化的html：
Click Me!Absolute positioned
简化为less / scss
.container {
display: inline-block;
.button { ... }
.relative {
position: relative;
.absolute {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
