Невозможно центрировать текст в диапазоне, когда используется позиция: абсолютная

Question

Я сталкиваюсь со странным поведением с span, когда его положение контролируется absolute. Я хочу центрировать текст по кругу.

.close-icon {
  background: red;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-size: 0.5rem;
  height: 0.75rem;
  justify-content: center;
  width: 0.75rem;
  align-items: center;
  position: absolute;
  right: 0.625rem;
  top: 0.375rem;
}

<span class="close-icon">X</span>

Выход:

Без позиции absolute:

background: red;
border-radius: 50%;
color: #ffffff;
display: flex;
font-size: 0.5rem;
height: 0.75rem;
justify-content: center;
width: 0.75rem;
align-items: center;

Вывод:

Я не могу найти какое-либо решение или причину, по которой это происходит. Было бы замечательно, если бы кто-то смог пролить свет на это поведение.

PS: Когда я удаляю right: 0.625rem, тогда он идеально выравнивается по центру.

Answer 1

Вы можете решить это следующим образом:

<style>
    .close-icon {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: red;
        border-radius: 50%;
        color: #ffffff;
        font-size: 0.5rem;
        height: 0.75rem;
        width: 0.75rem;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
</style>

Но учтите, что вам это нужно внутри относительного элемента, чтобы его можно было расположить посередине относительно этого элемента.