我无法使元素完全居中

Question

我有一个无线电输入的设计，中间有一个带有伪元素的圆圈

::before

但是当我将输入大小设置为奇数时，它并没有完全居中

尺寸较小时显得更明显

.input-radio { 
    display: flex;
    gap:  10px;
    height: fit-content;
}

.input-radio-button {
    --Primary-color:#07f;
    display: block;

    --size:15px;
    width: var(--size,10px);
    height: var(--size,10px);
    font-size: 13px;
    aspect-ratio: 1;
    border: var(--border-length,calc(var(--size,10px) / 7)) var(--Primary-color,#07f) solid;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: none;
    flex-grow: 0;
    flex-shrink: 0;
}

.input-radio-button::before { 
    content: "";
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--Primary-color);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: Fontawesome;
    font-size: 1.2em;
    color: var(--Primary-color);
    translate: -50% -50%;
    transition: scale .2s .1s;
}

<div class="input input-radio checked"> 
    <button class="input-radio-button"></button> <!-- the radio button -->
    <label  class="input-radio-label">banana</label>
</div>

Answer 1

我简单地放置了一个父元素并将其垂直居中。这是最简单的解决方案。

.v-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

<div class="v-center">
      <button class="input-radio-button"></button> <!-- the radio button -->
</div>

我已经申请并演示如下。

.input-radio { 
    display: flex;
    gap:  10px;
    height: fit-content;
}

.v-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-radio-button {
    --Primary-color:#07f;
    display: block;

    --size:15px;
    width: var(--size,10px);
    height: var(--size,10px);
    font-size: 13px;
    aspect-ratio: 1;
    border: var(--border-length,calc(var(--size,10px) / 7)) var(--Primary-color,#07f) solid;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: none;
    flex-grow: 0;
    flex-shrink: 0;
}

.input-radio-button::before { 
    content: "";
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--Primary-color);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: Fontawesome;
    font-size: 1.2em;
    color: var(--Primary-color);
    translate: -50% -50%;
    transition: scale .2s .1s;
}

<div class="input input-radio checked"> 
    <div class="v-center">
      <button class="input-radio-button"></button> <!-- the radio button -->
    </div>
    <label  class="input-radio-label">banana</label>
</div>