ruby元素不能用margin:auto居中，因其默认为inline级，而margin:auto仅对块级元素生效；强行设display:block会破坏rb/rt语义定位与可访问性。
ruby 标签本身不提供水平居中能力，必须靠父容器的 text-align: center 控制；单独对 ruby 元素设置 margin: 0 auto 或 justify-content 是无效的。
为什么 ruby 元素不能直接用 margin:auto 居中
ruby 是行内级（display: inline）元素，默认不会响应 margin: 0 auto —— 这个规则只对块级或 display: block 元素生效。即使你强行加 display: block，也会破坏 rb/rt 的语义定位逻辑，导致拼音错位或屏幕阅读器无法识别。
- 浏览器把
ruby当作一个整体“字”来处理，它的对齐行为由父容器的文本流决定 - 试图给
ruby加text-align: center没有意义，该属性不作用于自身，只影响子内容（而ruby内部没有可居中的“子文本流”） - 常见错误：在
ruby上写style="margin: 0 auto;"，结果毫无变化
正确做法：用父容器 text-align:center
只需让包裹 ruby 的块级父元素（如 div、p、section）启用文本居中即可。这是最轻量、最可靠的方式。
- 示例：
<div style="text-align: center;"> <ruby><rb>汉</rb><rt>hàn</rt></ruby> <ruby><rb>字</rb><rt>zì</rt></ruby> </div>
- 如果父容器是
p，直接写<p style="text-align: center;">...</p>同样有效 - 注意：不要用
<center>标签，它已被 HTML5 废弃
配合 CSS 避免换行切断字-音对应
当一行有多个 ruby，且容器宽度不足时，浏览器可能在汉字和拼音之间断行，造成语义断裂。这不是居中问题，但常被误认为“居中失效”。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
white-space: nowrap，强制整组 ruby 保持在同一行 - 若需响应式，可用
font-size: clamp(0.8rem, 2.5vw, 1rem)缩放整个 ruby 区域，而非只调拼音大小 - 避免对
ruby设置width或display: inline-block，这会干扰其内在排版节奏
复杂场景：需要 ruby 在页面视口正中（含垂直）
这时不是“ruby 居中”，而是“包含 ruby 的容器在视口中居中”。应使用 Flexbox 或 Grid 控制外层容器，而非动 ruby 本身。
- 推荐写法：
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"> <div style="text-align: center;"> <ruby><rb>注</rb><rt>zhù</rt></ruby> </div> </div> - 关键点：居中逻辑分两层——外层
flex定位容器，内层text-align: center对齐 ruby 内容 - 切勿在
ruby上加position: absolute，会彻底丢失可访问性与打印支持
真正容易被忽略的是：ruby 的居中本质是文本流对齐，不是盒子定位。一旦当成普通 div 去 flex 或 grid，反而会破坏东亚文字排版引擎的自动处理逻辑——尤其是 line-height、ruby-align 和字体度量之间的协同。
