css 绝对定位底部居中,css – 在另一个元素的中心下方水平居中绝对定位元素

有不同的方法可以做到这一点,但我发现最简单的方法是对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%);

}

}

}