Horizontal alignment horizontally horizontally

Question

I have an element whose position is the absolute only problem I am facing, I applied some properties to center horizontally and it works fine on mozilla but the same properties don't work on chrome here my code is

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

A useful trick for center elements is to use style transform: translatewith top, margin-left leftor margin-top.

To answer your question, you must apply the following styles to the element .slider a.downarrow:

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

---

, translate , height/width, .

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%).

EDIT: