text-align: center失效主因是父容器缺乏明确宽度或BFC，缩放会放大baseline对齐偏差；应改用display: flex + justify-content: center，并确保父容器有稳定高度和宽度。
超链接本身是行内元素，text-align: center 只作用于其父容器，且在缩放时容易因行高、字体渲染差异或父容器塌陷而失效——这不是 CSS 写错了，而是对齐上下文没立住。
为什么 text-align: center 在缩放后偏移
常见现象：正常尺寸下居中，Ctrl + + 缩放后文字右移、图标错位、下划线断裂。根本原因不是样式丢失，而是：
-
text-align: center依赖父容器有明确宽度和 BFC（块级格式化上下文），空<div>或display: inline-block包裹会塌陷 - 超链接里混了
<img>或 SVG 图标，它们默认按基线（baseline）对齐，缩放后 line-height 计算波动放大错位 - 父容器用了
position: absolute却没设width和left/right，导致text-align失去参照基准
用 Flex 替代 text-align 真正抗缩放
Flex 不依赖字体度量，缩放时对齐逻辑稳定。关键不是给 <a> 加样式，而是控制它的父容器：
- 父容器必须设
display: flex、justify-content: center，垂直方向加align-items: center（尤其含图标时） - 父容器需有明确高度，比如
min-height: 40px或height: 60vh；纯height: auto在缩放后可能塌陷 - 若父容器是
position: fixed或absolute，务必显式写width: 100%或max-width: 1200px，否则justify-content: center无意义 - 避免在父容器上用
margin: 0 auto—— Flex 容器里它被忽略
含图标的超链接要额外处理对齐
当 <a> 里嵌了 <img> 或 <svg>，即使 Flex 居中，图标仍可能比文字高半像素。这是因为浏览器对不同元素的 baseline 解析不一致，缩放会放大这个偏差：
立即学习“前端免费学习笔记（深入）”；
- 给图标加
vertical-align: middle或vertical-align: -0.125em（微调常用值） - 更可靠的做法：把图标和文字都包进
<span>，再统一设display: flex; align-items: center; gap: 8px - 删掉图标上的内联
width/height，改用max-width: 1.2em; height: auto，防止缩放时强行拉伸 - 如果用了
object-fit: contain，必须确保图标容器有固定宽高，否则它不生效
移动端和旧 Safari 的兼容补丁
iOS 15 以下 Safari 对 Flex + align-items: center 在缩放时偶发计算偏差，可加一层兜底：
- 父容器加
min-width: 0，防止 flex item 因默认min-width: auto抗缩放 - 超链接本身加
display: block，消除行内元素底部空白（缩放后该空白会被放大） - 避免用
vw设父容器宽度（如width: 90vw），横竖屏切换时 Safari 可能不重绘，导致居中偏移 - 真正在意兼容性时，Android 4.4 WebView 需加
display: -webkit-flex
真正容易被忽略的是父容器是否形成 BFC 并拥有稳定高度上下文——缩放不是让 CSS 失效，而是暴露了原本就脆弱的布局锚点。
