如何为CSS伪元素实现的圆形折扣徽章内部文本设置居中对齐

解决方案 #

你需要给.discount的::before伪元素新增居中相关属性，即可实现圆形内文本的水平+垂直居中，修改后的完整代码如下：

.discount {
  &::before {
    content: 'Super BOLK +1,90€';
    color: #FFD652;
    position: absolute;
    top: -22px;
    right: -22px;
    width: 83.85px;
    height: 82.21px;
    border-radius: 50%;
    background-color: var(--primary-color);
    transform: rotate(30deg);
    font-size: 15px;
    margin: 5px;
    border-width: 0 0.3em 0.25em 0;
    /* 新增居中属性 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 可选：强制文字不折行，取消注释即可生效 */
    /* white-space: nowrap; */
  }
}

新增属性说明

• display: flex：将伪元素转为弹性布局容器，方便后续对齐操作
• align-items: center：实现垂直方向的内容居中
• justify-content: center：实现水平方向的内容居中
• text-align: center：兜底兼容多行文本的水平对齐

如果你可以确定内容永远为单行文本，也可以用更简洁的行高方案，替换上面新增的flex相关属性为：

text-align: center;
line-height: 82.21px;

内容的提问来源于stack exchange，提问作者Melvin Dbt