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和-ms-grid-columns为-ms-grid-rows定义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 Grid在IE11中居中

2 个答案: