css - 水平居中对齐位置绝对对象

Question

我有一个元素，它的位置是绝对的，我面临的唯一问题是我应用了一些属性来水平对齐它，它在 mozilla 上工作正常，但相同的属性在 chrome 上不起作用这是我的代码

html

<a href="#section1" class="scrollTo downarrow"><img src="images/navbar_downarrow.png" class="img-responsive"/></a>

CSS

    .slider{
        position: relative;
        background-image: url("../images/slider.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .slider a.downarrow{
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 20px;
        display: table;
    }

Answer 1

将元素居中的一个有用技巧是将 transform:translate 样式与 top、margin-left left 一起使用 或 margin-top。

要回答您的问题，您必须将以下样式应用到您的 .slider a.downarrow 元素:

left: 50%;
transform: translateX(-50%);

---

这是因为如果 translate 与百分比值一起使用，它的值是根据应用它的元素的高度/宽度计算的。

top, margin-left left 和 margin-top 百分比值是基于父元素计算的或者如果元素根据具有 position: relative/absolute 的最近父元素应用了 position: absolute。

要使元素居中，您只需将 50% 的值应用于 top、margin-left left 或 margin-top 和 -50% 的值 translate。

对于 left 和 margin-left 你必须使用 translateX(-50%) 而对于其他的 translateY(- 50%)。

编辑:添加了解释