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

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%，请改用负值进行翻译。