css - 如何用百分比绝对定位元素？

Question

我有一个元素，我试图将其绝对定位到中心和底部附近。无论我从右边还是左边做 50%，似乎都稍微偏离了中心。

在此屏幕截图中，您可以看到它位于中心左侧一点。

a.down {
    font-size:70px;
    color:#fff;
    text-align: center;
    bottom:5%;
    position: absolute;
    right: 50%;
}
<a href="#we-are-the-leader" class="down">
    <i class="fa fa-angle-down"></i>
</a>

Answer 1

如果您愿意使用 CSS 转换，解决方案非常简单:

a.down {
    font-size:70px;
    color:#fff;
    text-align: center;
    bottom:5%;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
}

由于变换百分比是根据元素的尺寸计算的，使用沿 x 轴的正 50% 平移只是将元素重新定位到右侧，即其计算宽度的一半——实现完美的水平对齐。

如果您使用的是 left: 50%，请改用负值进行平移。