Image not overlapping on IE

Question

Hi guys so i have a simple image and then i have a button which overlaps it and its working fine on all platforms, however for some reason it dosen't work at all on IE or my iphone when i launch my site. The button just sits to the right of the picture , I have no idea why IE does this but if anyone can help me fix the bug on it, it would be great

HTML:

  <div class="aboutpic">
    <img src="Images/back2.jpg" class="img-responsive">
    <a href="CV.pdf" button type="button" class="btn btn-warning">Download Resume</a>
  </div> 

CSS:

.btn-warning {
  color: #fff;
  background-color: rgba(255, 198, 0, 0.9);
  border: 0;
  padding: 23px;
  border-radius: 34px;
  line-height: 0.428571;
  position: absolute;
  z-index:1;
}

.aboutpic {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 59px;

}

Again this works perfectly in google , chrome and mobiles etc but not iN IE or my iphone 6+ and i really have no clue how to fix it

Thanks

Answer 1

As the other answer states, flex is not supported in IE. IF you use position:absolute you can easily center the text with translate and positions

Also your HTML was not correct ( the button inside the a ), because

1. you didn't open / close the button tags.
2. nesting button inside a is not valid html

see below

.btn-warning {
  color: #fff;
  background-color: rgba(255, 198, 0, 0.9);
  border: 0;
  padding: 23px;
  border-radius: 34px;
  line-height: 0.428571;
  position: absolute;
  z-index:1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}

.aboutpic {
 position:relative;
 text-align:center;

}

<div class="aboutpic">
    <img src="http://via.placeholder.com/350x150" class="img-responsive">
    <a href="CV.pdf" class="btn btn-warning">Download Resume</a>
  </div>

or > jsFiddle

Answer 2

flex is not supported in IE 10, you must use -ms-flex instead.