Html css边框半径圆变为椭圆，位置：绝对

我正在围绕一个字体图标创建一个圆圈。我的问题是，当我添加

position:absolute

时，圆变成了椭圆

如果设置

display:block

这是我试图实现的一个形象-

---

要使绝对定位的

div水平居中，不使用
left:0
和
right:0
。如您所见，这实际上是通过将
div
的一端设置为包含框的左边缘，另一端设置为右边缘来拉伸它

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

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

有关其工作原理的详细信息，请参见：
您需要使用绝对定位来定义宽度和高度，或者将其包装在相对定位的div中，或者将定位设置为相对，然后使用顶部、左侧来定位。问题不是因为您设置了
位置：绝对
。这是因为您设置了
右：0
和
左：0
。这告诉它占据整个宽度。问题是高度-宽度将发生变化，因此我不知道我已将
right:0
和
left:0
设置为使其居中的值，这是否错误？对不起，我的错误。你是对的，但是你也需要
margin:0auto，您需要使用此解决方案定义宽度。您说宽度和高度会改变，但如果您定义宽度：1em
，可能会改变？这与您在
i
上定义的
字体大小有关。非常感谢，您的示例和留下的注释说明了我出现问题的原因
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;
}

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