css border-radius circle变为椭圆，位置为：absolute

Question

我正在创建一个围绕字体真棒图标的圆圈。我的问题是，当我添加position: absolute时，圆圈变为椭圆形。

如果我要设置display: block

，也会发生同样的情况

这是我想要实现的目标的图像 -

<slide class="assessment-score">
  <div class="score-heading pass">
    <span id="score-salutation" class="light">CONRADULATIONS</span>
    <span id="score-message">YOU HAVE PASSED</span>
    <i class="fa fa-check-circle"></i>
  </div>
  <div class="score-results">
    <span id="score">You have scored 92%</span>
    <button>DOWNLOAD YOU CERTIFICATE</button>
    <a id="assessment-close"><i class="fa fa-times-circle-o"></i> CLOSE ASSESSMENT</a>
  </div>
</slide>

css

slide.assessment-score .score-heading{
  height: 33%;
  background-color: #a8db66;
  border-radius: 5px 5px 0 0;
  color: #ffffff;
  position: relative;
}
slide.assessment-score .score-heading i{
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 6em;
  margin-bottom: -30px;
  border-radius: 50%;
  padding: 1rem
  background-color: black;
}

Answer 1

要将绝对定位的div水平居中，请不要使用left: 0和right: 0。如您所见，通过将div的一端设置为包含框的左边缘，另一端设置为右边缘，实际上将其拉伸。

要将绝对定位div水平居中，请尝试以下操作：

slide.assessment-score .score-heading i {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

有关其工作原理的详细信息，请参阅：Element will not stay centered, especially when re-sizing screen