writing-mode本身不直接实现垂直居中，而是通过改变文档流方向，使原本水平的margin: 0 auto逻辑映射到垂直方向；配合display: block和margin: auto 0，浏览器在新块级方向（视觉垂直）分配剩余空间，从而实现视觉上的垂直居中。
writing-mode 本身不直接“实现垂直居中”，它只是改变文本流方向。真正起居中作用的是配合 margin: auto 或 text-align 的行为变化。关键在于理解：当块级元素的文档流变成垂直方向后，原本水平方向的居中逻辑（margin: 0 auto）会自然映射到垂直方向。
为什么 writing-mode: vertical-lr + margin: auto 0 能居中？
因为 writing-mode: vertical-lr 把块级方向（即原来从上到下的布局方向）变成了从左到右，而行内方向变成了从上到下。此时，margin-top 和 margin-bottom 变成“块级外边距”，浏览器会把它们当作在块级方向上可分配的空间来处理——也就是现在这个方向是水平的，所以 margin: auto 0 实际是在新块级方向（水平）上居中，但视觉效果是元素在父容器里垂直居中。
简单说：不是它“垂直居中”，而是你把“垂直”当成了新的“水平”，然后用老办法居中。
-
writing-mode: vertical-lr后，父容器的 height 变成“可用行内尺寸”，width 变成“可用块级尺寸” - 子元素设
margin: auto 0，等价于margin-block: auto，浏览器会在块级方向（现为水平）分配剩余空间 - 所以子元素在父容器的 height 方向上视觉居中，但技术上是“在水平方向块级居中”
img 元素必须显式设 display: block
默认 img 是 inline 元素，在 writing-mode 下不会响应 margin: auto 垂直居中。浏览器会把它当文字一样处理，只占行高，不撑开块级上下空间。
- 不加
display: block→margin: auto 0无效，图片卡在顶部 - 加上
display: block→ 它成为块级元素，能占据整行高度，margin: auto才有作用空间 - 如果用
vertical-align配合 inline 场景，那是另一套逻辑，不适用于这里的目标
别混淆 text-align 和 margin 的作用对象
text-align: center 在 writing-mode: vertical-lr 下会让**内联内容**（比如文字、inline img）在“新行内方向”上居中——也就是视觉上变成水平居中（因为行内方向现在是竖着的）。这不是元素级居中，而是内容对齐。
- 想让一段竖排文字居中显示？用
text-align: center即可 - 想让一个 div 或 img 在父容器里垂直居中？必须用
margin: auto 0+display: block - 两者混用容易失效：比如给父容器设
writing-mode，又给子元素设text-align，但子元素是块级，text-align不影响它的位置
兼容性和 fallback 要手动处理
writing-mode 在现代浏览器支持良好（Chrome 48+、Firefox 41+、Safari 14.1+），但 IE 完全不支持 vertical-lr（只认 tb-rl 等旧值），且 margin: auto 在垂直方向的块级居中行为在旧引擎里不可靠。
- 不要依赖它做核心布局；适合辅助场景，比如标签、图标、小卡片的紧凑垂直居中
- 需要降级时，建议用
flex或position: absolute+margin: auto作为 fallback - 注意：
writing-mode会影响整个子树的文本流向，嵌套子元素若需恢复水平排版，得显式重置writing-mode: horizontal-tb
实际最容易被忽略的一点：writing-mode 改变的是整个盒模型的坐标系，不是单纯旋转。所有后续布局计算（包括 height、width、padding、margin 的含义）都随之切换方向。 你以为设的是 height，其实它可能成了“行内尺寸”——这点不厘清，调试时会反复怀疑 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
