绝对底部定位在Edge和IE中无法正常工作

Question

I have an icon that is absolute positioned at bottom: 50px , while this works fine in every browser, Edge and IE are the exceptions. I understand there are a lot of problems with Microsoft's browsers and how they render differently. Here I see that the browser is treating the mid-way point of the 100vh div as the bottom. What I need help with is to position the icon in IE & Edge the same way it is in Chrome, Opera and Firefox. Thanks.

IE & Edge

Chrome, Firefox, Opera

HTML

 .content1 { height: 100vh; width: 100%; position: relative; top: 0; z-index: 99; } /* this is the icon I was talking about */ .dropdown_blue1 { width: 25px; padding: 20px; position: absolute; margin: auto; z-index: 99; left: 0; right: 0; bottom: 50px; } 

 <div class="content1"><img class="dropup_blue1" src="../assets/dropup_blue.png" alt=""><img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt=""></div> 

Answer 1

Try with this one, i have changed margin: auto; to margin: 0 auto;

 .content1 { height: 100vh; width: 100%; position: relative; top: 0; z-index: 99; } .dropdown_blue1 { width: 25px; padding: 20px; position: absolute; margin:0 auto; /* change here */ z-index: 99; left: 0; right: 0; bottom: 50px; } 

 <div class="content1"> <img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt=""> </div> 

Answer 2

I had a similar problem with the two browsers, position absolute was crazy. In style section I had.

td.Cir  {width:7in; height:7in; background-image:url('clock.png'); 
  background-size: 45%; background-position: center; 
  background-repeat:no-repeat; position:relative; font-size:28pt;
  min-width:7in; max-width:7in; text-shadow: -1px 0 blue, 0 1px blue,
  1px 0 blue, 0 -1px blue;}

In a table I had

</td></tr><tr><td class='Cir'>...</td><td>...</td></tr>

I changed code to

<table><tr><td class='Cir'>...</td><td>...</td></tr></table>

and Edge and IE now work fine

Answer 3

I fixed it! Simply use margin-left: auto; and margin-right: auto; instead of margin: auto;