text-align: center 是纯 CSS 实现星星居中最直接有效的方式，适用于 inline 或 inline-block 的 label 元素；需配合 vertical-align: middle 和 fieldset 重置以确保真机点击准确。

星星容器用 text-align: center 就够了

纯 CSS 实现星星居中，最直接有效的方式是给外层容器设 text-align: center，前提是所有星星元素是 inline 或 inline-block。这是唯一不需要 flex、grid 或 margin hack 的可靠方案。

• label 默认是 inline 元素，只要没被强制设成 block，text-align: center 就能生效
• 如果用了 display: inline-block（比如加了 padding 扩大点击热区），也完全兼容 text-align
• 避免对容器设 display: flex; justify-content: center —— 它会干扰 ~ 兄弟选择器的 DOM 顺序匹配，尤其当星星逆序排列时，视觉居中但选择器失效
• 别用 margin: 0 auto，因为单个 label 不是块级元素，auto 水平居中不生效

为什么 flex-direction: row-reverse + justify-content: center 会出问题

有人想让高分在右、整体又居中，就给容器加 display: flex 和 flex-direction: row-reverse。这会导致两个硬伤：

• CSS 的 ~ 选择器只认 DOM 顺序，不是视觉顺序 —— input[value="3"]:checked ~ label 依然按 HTML 里从左到右的位置匹配，不会“倒着选”
• 屏幕阅读器仍按原始 DOM 顺序朗读“5 星、4 星、3 星…”，但用户看到的是“1 星在左、5 星在右”，语义错位
• 真正需要右对齐高分，应该把 input 和 label 本身按 5→1 逆序写 HTML，再用 text-align: center 居中，既保持逻辑又不失可访问性

移动端居中后点击热区偏移怎么办

居中后发现手指点星星边缘没反应，往往不是居中本身的问题，而是 label 热区没撑开：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 确认每个 label 有 display: inline-block 和至少 padding: 8px，否则文字基线对齐会让点击区域上浮
• 不要依赖 line-height 垂直居中 —— Unicode ★ 字符在不同字体下 baseline 不一致，容易上下偏移
• 加 vertical-align: middle 到 label 上，能稳定对齐图标和文字
• 真机测试时打开系统“辅助功能 > 触摸反馈”，看点击光晕是否完整覆盖每颗星

fieldset legend 会影响居中吗

用 fieldset 包裹星星组是 WCAG 强制要求，但它自带 margin 和 border，会破坏居中效果：

立即学习“前端免费学习笔记（深入）”；

• 必须重置：fieldset { border: none; padding: 0; margin: 0; }
• legend 默认是块级且带 margin，即使视觉隐藏也要处理：legend { position: absolute; clip: rect(1px, 1px, 1px, 1px); }
• 重置后，text-align: center 对 fieldset 内部 label 依然有效 —— 因为它作用于行内内容流，不依赖 display 类型

实际最容易被忽略的，是 label 的 vertical-align 和 fieldset 的默认 margin 同时存在时，居中看起来“差不多”，但真机点击总偏半颗星——这两处不显眼，却决定交互是否可靠。