中心对齐水平位置绝对对象

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: absolute基于与最近的父应用到它position: relative/absolute.

到中心的元素,你只需要申请的价值50%要么top,margin-left left或margin-top和值-50%来translate.

对于left和margin-left你必须使用translateX(-50%)和其他人translateY(-50%).

编辑:添加了解释