时间戳

首页 > 解决方案 > 水平居中 div

html - 水平居中 div

问题描述

我想水平居中一个 div 但它在谷歌浏览器中工作但在 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>

标签： htmlcssinternet-explorer

解决方案

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>

推荐阅读