使用 CSS Grid 在 IE11 中居中答案

【问题标题】：Centering in IE11 with CSS Grid使用 CSS Grid 在 IE11 中居中
【发布时间】：2018-12-03 17:15:39
【问题描述】：

我目前正在尝试通过 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>

【问题讨论】：

标签： html css internet-explorer-11 css-grid

【解决方案1】：

看起来我在 IE 10/11 中找到了支持此功能的有效解决方案。基本上使用-ms-grid-columns 和-ms-grid-rows 为-ms-grid 定义3 列和3 行，然后使用-ms-grid-column 和@ 指定我想要居中的内容应该在第2 列和第2 行（中间） 987654325@。解决方法如下：

<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>

【讨论】：

我可以看到您已经发布了针对您的问题的解决方案。我建议您在 24 小时后将该解决方案标记为该线程的可接受答案，这可能会在未来帮助其他社区成员。感谢您的理解。
我真的希望您刚刚为简洁起见内联了您的 css。这至少应该在 <style> 块中，或者最好是外部 CSS 资源。
是的，这里的 css 是内联的，仅用于演示目的

【解决方案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>

【讨论】：