Flexbox居中在IE 11中不起作用

Question

justify-content和align-items使用center似乎无法在IE 11中正常工作。在其他浏览器中，它的工作与我期望的一样。有人知道解决方法吗？

.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.score-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 280px;
}

.overlay-circle {
  border-radius: 100px;
  border: 1px solid red;
  fill: transparent;
  height: 200px;
  position: absolute;
  width: 200px;
}

.center-circle {
  border-radius: 90px;
  border: 1px solid blue;
  height: 180px;
  position: absolute;
  width: 180px;
}

<div class="box">
  <div class="score-wrapper">
    <div class="overlay-circle"></div>
    <div class="center-circle">
      <div class="score">
        <p>800</p>
        <p>Excellent</p>
      </div>
    </div>
  </div>

Answer 1

，其中提到了2个：

• 在IE10和IE11中，如果容器具有min-height但没有显式的height属性，则显示：flex和flex-direction：的容器将无法正确计算其flexed子代的大小。查看错误。
• 使用最小高度时，IE 11不能正确垂直对齐项目，请参见错误

这就是说，为IE11在.score-wrapper上添加一个明显的高度作为后备。

.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.score-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 280px;
  height: 280px;
}

.overlay-circle {
  border-radius: 100px;
  border: 1px solid red;
  fill: transparent;
  height: 200px;
  position: absolute;
  width: 200px;
}

.center-circle {
  border-radius: 90px;
  border: 1px solid blue;
  height: 180px;
  position: absolute;
  width: 180px;
}