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>

Answer 2

尝试一下：测试了其工作原理！

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
      .pagination--custom {
          width: 50px;
          height: 50px;
          border: 1px solid #000;
          margin: 0 auto;
      }
    </style>
</head>
<body>

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


</body>


</html>

只需设置margin: 0 auto;即可进行分页

Answer 3

您的margin: 0 auto;必须在.pagination上并删除width: fit-content;。

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

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

水平居中div

3 个答案: