如何在圆角圆形容器中居中文字？附代码示例

嘿，我来帮你搞定这个圆形贴纸里的文字居中问题！先看你现有代码里的两个小问题，咱们一步步修正：

1. 先修复HTML标签嵌套错误 #

你代码里的<span>和<b>标签闭合顺序搞反了，这会导致DOM结构混乱，浏览器渲染可能出问题。正确的嵌套应该是：

<span class='flash font--heading'>
  <b class="sticker">+FREE shipping!</b>
</span>

2. 添加CSS实现文字居中 #

你的.sticker类目前只设置了形状和背景，缺少让文字居中的样式。最灵活的方式是用Flex布局，它能轻松实现元素内内容的水平+垂直居中，不管文字长度怎么变都能适配：

.sticker {
  position: absolute;
  z-index: 5;
  width: 5em;
  height: 5em;
  background-color: yellow;
  border-radius: 100%;
  background-image: linear-gradient(135deg, #ffff00, #ffff00 15%, cyan);
  /* 去掉了代码里重复无效的-image属性 */
  top: -13px;
  /* 新增居中核心样式 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 可选优化：让文字更美观 */
  font-weight: bold;
  text-align: center;
  padding: 0.2em; /* 防止文字太贴圆形边缘 */
}

.block__container {
  position: relative;
}

为什么选Flex布局？ #

相比传统的line-height（仅适合单行文字），Flex布局支持多行文字的居中，而且能适配不同尺寸的容器，现代浏览器兼容性拉满，实用性更强。

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