使用 CSS 网格在 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 为 -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>

使用 CSS 网格在 IE11 中居中

Centering in IE11 with CSS Grid

html

css

internet-explorer-11

css-grid