使用CSS网格在IE11中居中

看来我在IE10/11中找到了一个有效的解决方案来支持这一点。基本上定义3列和3行 -ms-grid 通过使用 -ms-grid-columns 和 -ms-grid-rows 然后指定我要居中的内容应位于第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>

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>