12

i have an element whose position is absolute the only issue i am facing is i have applied some properties to align it center horizontally and it is working fine on mozilla but the same properties are not working on chrome here's my code

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;
    }
Mahpooya
  • 529
  • 1
  • 6
  • 18
uneeb meer
  • 682
  • 2
  • 7
  • 27

1 Answers1

39

A useful trick to center elements is to use the transform: translate style together with either top, margin-left left or margin-top.

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

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

The way this works is because if translate is used with a percentage value, its value is calculated based on the elements height/width on which it is applied on.

top, margin-left left and margin-top percentage values are calculated based on the parent element or in case the element has position: absolute applied to it based on the nearest parent with position: relative/absolute.

To center an element you just need to apply a value of 50% to either top, margin-left left or margin-top and a value of -50% to translate.

For left and margin-left you have to use translateX(-50%) and for the others translateY(-50%).

EDIT: Added an explanation

cyr_x
  • 13,987
  • 2
  • 32
  • 46
  • 2
    Wow, this was quite a find. Thank you both for the question and the answer. Saved my life! – Nicholas Kircher Sep 20 '17 at 23:24
  • One notable caveat to this method is that the size will only grow to 50% of the positioned parent's width. If you need larger than that you must define a width for the div. – user2145184 Apr 15 '18 at 00:23