rtl下grid居中错位并非bug，而是浏览器按书写方向重映射对齐逻辑；必须在根或网格容器显式设dir="rtl"，仅lang或字体切换无效。
RTL语言下Grid布局居中错位
切换到阿拉伯语、希伯来语等RTL语言后，用justify-content: center或place-items: center居中的元素突然偏右（或偏左），不是bug，是浏览器按书写方向重映射了对齐逻辑。关键不是改CSS，而是确认容器是否真正进入RTL上下文。
- 必须在根元素或网格容器上显式设置
dir="rtl"，仅靠lang="ar"或字体切换无效 -
place-items: center在RTL下仍居中，但justify-content: start/end会变成“右对齐/左对齐”，别误以为失效 - 若用
grid-column: 1 / 3这类线号定位，RTL下线号从右往左编号，视觉位置翻转——建议改用命名线，如grid-column: main-start / main-end - 旧版Safari对
grid-column: -2等负索引在RTL下支持不稳，直接避开
Flexbox在多语言切换时垂直居中失效
切换语言后，原本居中的卡片突然贴顶或溢出，大概率是父容器高度塌陷，而非Flex属性被覆盖。语言切换本身不改CSS，但DOM更新可能触发重排，暴露出原有布局隐患。
- 检查父容器是否仍保持
display: flex且有明确高度（height: 100vh或min-height: 100dvh） - 避免在语言切换JS里动态增删class导致
display被重置，优先用style.display = 'flex'硬设 - 子元素若含
img且未设aspect-ratio或height，加载完成前高度为0，align-items: center无参考基准——加min-height兜底 - Safari中混用
margin: auto和align-items: center会冲突，删掉前者
表单控件在语言切换后对齐偏移
输入框、按钮在切换成RTL语言后，文字右对齐了，但图标或内边距没同步镜像，导致视觉失衡。这不是居中问题，而是方向感知缺失。
- 给
input、button等表单元素设direction: inherit，让它跟随父容器dir值自动适配 - 慎用
text-align: right硬写——它只影响文字，不触发RTL布局逻辑；应依赖dir="rtl"让浏览器自动处理对齐、gap、滚动条位置 - 图标类
::before伪元素若用float: right，在RTL下会错乱，改用margin-inline-start或margin-inline-end - 若用
transform: scaleX(-1)强行镜像图标，会导致文字也被反转，必须配合transform: scaleX(-1)再套一层direction: ltr
data-i18n绑定后文本撑开容器导致居中偏移
语言包里某条文案比原语言长（比如英文"Submit" → 阿拉伯语"أرسل"），容器宽度被撑大，margin: 0 auto或Flex居中看起来“偏了”。本质是尺寸变化，不是居中逻辑失效。
- 给容器设
max-width而非width，防止长文本无限扩张 - 对按钮等行内块元素，用
white-space: nowrap+overflow: hidden+text-overflow: ellipsis截断超长文案 - 避免在
data-i18n绑定后手动调用element.style.width = '...'——宽度应由CSS控制，JS只管内容 - 若必须动态适配，监听
resize事件不如用ResizeObserver观察容器尺寸变化再微调
document.documentElement.lang设置、dir属性更新、到DOM批量渲染——每一步都到位，否则居中只是表面稳定。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
