使用 flex 垂直居中在 Internet Explorer 11 中無法正常工作

Question

我正在嘗試使用 flex 將一個圖標居中在 2 個 div 內。 代碼如下：

 .div-1 { width: 50px; height: 50px; display: flex; border-radius: 50%; background-color: #228B22; }.div-2 { margin: auto; } i { color: #ffffff; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="div-1"> <div class="div-2"> <i class="fa fa-leaf fa-2x" aria-hidden="true"></i> </div> </div>

這適用於我測試過的幾乎所有瀏覽器。 但是，在 IE11 上，圖標不是垂直居中的。 相反，它被粘在頂部。 我該如何解決這個問題，我到底做錯了什么？

Answer 1

IE 11 沒有完全支持 flex，這似乎是一個在 flex 父級內部有邊距的錯誤。 嘗試添加另一個支持的規則：

 .div-1 { width: 50px; height: 50px; display: flex; border-radius: 50%; background-color: #228B22; align-items: center; /* Add this*/ }.div-2 { margin: auto; } i { color: #ffffff; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="div-1"> <div class="div-2"> <i class="fa fa-leaf fa-2x" aria-hidden="true"></i> </div> </div>