使用CSS Grid在IE11中居中

Question

我目前正在嘗試通過CSS網格居中（垂直和水平）元素。 經過一些研究，似乎IE11通過不同的語法而不是最新的瀏覽器（edge，safari，chrome等）支持CSS網格。 我正在使用display:-ms-grid語法，這會將我的元素放在屏幕的左上方，而不是按照我的意願居中。 請注意，發布的示例在其他瀏覽器上確實可以正常工作。

<div style="height:100%;display:grid;display:-ms-grid;">
     <div style="margin:auto" align="center">
          <img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
          <div style="margin-top:2%;" class="loader"></div>
     </div>
</div>

如何克服IE11的居中問題？

更新：到目前為止，我已經能夠將其垂直居中，而不能水平居中。 我現在在這里：

<div style="height:100%;display:grid;display:-ms-grid;-ms-grid-columns:2fr 2fr 2fr;">
     <div style="margin:auto;-ms-grid-column:2;" align="center">
          <img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
          <div style="margin-top:2%;" class="loader"></div>
     </div>
</div>

Answer 1

看起來我在IE 10/11中找到了一個支持此功能的可行解決方案。 基本上，通過使用-ms-grid-columns和-ms-grid-rows rows為-ms-grid定義3列和3行，然后指定我要居中的內容應位於第2列和第2行（中間）通過使用-ms-grid-column和-ms-grid-row 。 解決方法如下：

<div style="height:100%;display:grid;display:-ms-grid;-ms-grid-columns:2fr 2fr 2fr;-ms-grid-rows: 2fr 2fr 2fr;">
     <div style="margin:auto;-ms-grid-column:2;-ms-grid-row:2;" align="center">
          <img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
          <div style="margin-top:2%;" class="loader"></div>
     </div>
</div>

Answer 2

的CSS

.grid-container {
  height: 100%;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center
}

的HTML

<div class="grid-container">
  <img id="logo" alt="Logo" width="250px" src="data:image/svg+xml;base64,xxxxxxxxxxxxx" />
</div>