text-align: center 在所有主流浏览器及 windows/macos 上行为完全一致，仅影响行内内容或可替换元素的水平对齐；所谓“不居中”实为字体度量、行高、dom 结构或 css 优先级所致，与操作系统无关。
HTML 中 text-align: center 在 Windows 和 macOS 上表现一致
直接说结论：text-align: center 这个 CSS 声明在 Chrome、Firefox、Safari、Edge 所有主流浏览器里，无论 Windows 还是 macOS，行为完全一致——它只对**行内内容或可替换元素的水平对齐方式起作用**，和操作系统无关。
很多人误以为“系统字体渲染差异”会导致居中偏移，其实不是居中逻辑变了，而是字体度量（ascent/descent）、默认行高、或 font-family 回退链不同，让视觉上“看起来没居中”，但 text-align 本身没差别。
text-align: center 不生效的常见原因
真正导致“设了居中却不居中”的，基本都是 DOM 结构或 CSS 优先级问题，和系统无关：
-
display: block元素（比如div）设text-align: center，只影响其内部的行内内容（如文字、span、img），不影响它自己在父容器里的位置 - 父容器没设置宽度，或用了
display: flex/display: grid，此时text-align完全不参与布局 - 子元素是
position: absolute或float: left，脱离了文档流，text-align对它无效 - CSS 优先级被更高权重的规则覆盖（比如用
!important的其他样式，或更具体的选择器）
想让块级元素自己居中，该用什么
如果目标是让一个 div、section 等块级容器在父容器里水平居中，text-align 不是正确工具。应该根据场景选：
- 已知宽度 + 水平居中：
margin: 0 auto（需设width或max-width） - Flex 布局父容器：
justify-content: center - Grid 布局父容器：
justify-items: center或justify-content: center - 绝对定位居中：
left: 50%+transform: translateX(-50%)
这些方案在 Win/mac 下也无差异，但要注意：Flex/Grid 的兼容性比 text-align 差一点（IE10+、旧 Safari 需前缀），而 margin: 0 auto 是最稳的通用解。
字体和行高带来的“假偏移”怎么调
即使 text-align: center 生效了，文字在按钮或卡片里“看着偏下”，大概率是 line-height 和字体基线（baseline）造成的。macOS 默认用 San Francisco，Windows 用 Segoe UI，两者 x-height、ascender 高度不同，导致同样 line-height: 2 渲染出的垂直空间分布不一致。
解决思路不是换系统，而是控制垂直节奏：
- 避免依赖默认
line-height，显式设为无单位数值（如line-height: 1.4）而非像素值 - 对图标+文字组合，用
vertical-align: middle或 Flex 替代纯文本对齐 - 调试时打开浏览器开发者工具，勾选“显示网格线”或用
outline: 1px solid red看实际盒模型边界，别只凭肉眼判断
这个细节容易被忽略：你调的是视觉感受，但根源不在居中逻辑，而在字体度量和行盒（line box）的生成规则。不同系统只是暴露了这个问题，不是制造了它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
