无法使用IE11上的Flexbox将内容垂直居中

Question

因此，我试图通过flexbox垂直居中2个div，它在所有主要浏览器上居中，但在IE11上却不正确。

搜索此内容后，我发现以div为最小高度居中存在问题，但是我没有使用它，所以我不知道是哪里错了或丢失了。

JSFiddle

 .container { position: relative; display: flex; align-items: center; } img { max-width: 100%; } .prev { width: 40px; height: 40px; background: rgba(0,0,0,.8); position: absolute; left: 30px; } .next { width: 40px; height: 40px; background: rgba(0,0,0,.8); position: absolute; right: 30px; } 

  <div class="container"> <img src="https://www.w3schools.com/css/trolltunga.jpg"> <div class="prev"></div> <div class="next"></div> </div> 

Answer 1

您可以删除flexbox规则，而是使用transform垂直将div居中...

小提琴

 .container { position: relative; } img { max-width: 100%; display: block; /* added */ } .prev, .next { top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(0, 0, 0, .8); position: absolute; } .prev { left: 30px; } .next { right: 30px; } 

 <div class="container"> <img src="https://www.w3schools.com/css/trolltunga.jpg"> <div class="prev"></div> <div class="next"></div> </div> 

或者，如果要保留flexbox规则，则可以添加top ， bottom和margin属性以满足IE。

小提琴

 .container { position: relative; display: flex; align-items: center; } img { max-width: 100%; display: block; /* added */ } .prev, .next { top: 0; bottom: 0; margin: auto; width: 40px; height: 40px; background: rgba(0, 0, 0, .8); position: absolute; } .prev { left: 30px; } .next { right: 30px; } 

 <div class="container"> <img src="https://www.w3schools.com/css/trolltunga.jpg"> <div class="prev"></div> <div class="next"></div> </div>