居中对齐，绝对定位的对象水平方向

Question

我有一个元素，其位置属性为absolute。唯一的问题是我已经使用了一些属性将其水平居中对齐，并且在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;
    }

- uneeb meer

---

已经删除了它，是因为打错了。 - uneeb meer

你知道 downarrow 的宽度吗？ - Raúl Martín

宽度为100％适用于Chrome但仍然有效。 - uneeb meer

似乎您需要指定 .slider 的宽度，例如 width: 100vw;。 - Banzay

现在它正在占据整个屏幕的宽度。 - uneeb meer

非常有用的指南：https://css-tricks.com/centering-css-complete-guide/ - Tom

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: absolute属性的情况下，基于最近的一个带有position: relative/absolute属性的父元素进行计算。
要使元素居中，只需将top、margin-left、left或margin-top的值设置为50%，并在translate中设置-50%的值即可。
对于left和margin-left，需要使用translateX(-50%)，而对于其他属性，则需要使用translateY(-50%)。

- cyr_x

---

哇，这是个大发现。感谢你们的问题和答案。救了我的命！ - Nicholas Kircher

这种方法需要注意的一个重要限制是，大小只会增长到定位父元素宽度的50％。如果您需要更大的尺寸，则必须为div定义一个宽度。 - user2145184