html - 水平居中 div

Question

我想将一个 div 水平居中，但它在 Google Chrome 中有效，但在 IE 中无效。

这是我的代码:

.app-content {
  width: 100%;
  height: calc(100%);
  position: relative;
}
.pagination--custom {
  width: fit-content;
  margin: 0 auto;
  border: 1px solid blue;
}
.pagination {
  border: 1px solid black;
  height: 50px;
}

<div class="app-content">
  <div class="pagination--custom">
    <div class="pagination">
    </div>
  </div>
</div>

Answer 1

fit-content 是实验性的，不会在 ie 或 edge 中工作:https://developer.mozilla.org/en-US/docs/Web/CSS/width .

让它成为 display: inline-block 并将 text-align: center 放在父元素上

.app-content {
  width: 100%;
  height: calc(100%);
  position: relative;
  text-align:center;
}
.pagination--custom {
  display:inline-block;
  margin: 0 auto;
  border: 1px solid blue;
}
.pagination {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

<div class="app-content">
  <div class="pagination--custom">
    <div class="pagination">
    </div>
  </div>
</div>