html - 在 CSS 中居中内容同时支持 IE 和 chrome

Question

我有这个 Css 网格，带有网格项，我可以通过应用 justify-items:center 或那种魔法轻松地将其居中。

但是这个方案在IE中好像不行，一直卡在左边。

https://codepen.io/anon/pen/jjgmNX

HTML:

<div class="grid-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

CSS:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
    justify-items: center;
}

.item-1 {
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    grid-column: 1;
    grid-row: 1;
}

.item-2 {
    background-color: rgba(145,520,0,.75);
    grid-gap: 20px;
}

.item-3 {
    background-color: rgba(145,520,0,.75);
    grid-column: 3;
    grid-row: 1;
}

.item-4 {
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    grid-column: 2;
    grid-row: 2;
}

我如何让子 div 居中 - IE 和 chrome 都支持？

Answer 1

您可以使用 flexbox 而不是在浏览器上具有良好支持的网格。

.grid-container {
    display: flex;
    justify-items: center;
    align-items: center;
    flex-wrap: wrap;
}

.item-1 {
    flex: 1 1 33.33%;
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
}

.item-2 {
    flex: 1 1 33.33%;
    background-color: rgba(145,520,0,.75);
}

.item-3 {
    flex: 1 1 33.33%;
    background-color: rgba(145,520,0,.75);
}

.item-4 {
   flex-basis: 33.33%;
   /* important */
   margin: auto;
   background-color: rgba(0,0,0,.25);
   border-color: transparent;
}