writing-mode改变排版后，margin:0 auto和text-align:center的语义随之翻转：在vertical-rl/lr下，margin:auto沿行内轴（即视觉垂直方向）居中，text-align:center实现视觉垂直居中；需确保子元素为block且显式设置宽高，否则无效。
writing-mode 改变排版后，元素居中不是简单套用 margin: 0 auto 或 text-align: center 就能生效的——因为书写方向变了，「水平」和「垂直」的语义也跟着翻转了。
writing-mode 下 margin:auto 的行为变化
当容器设为 writing-mode: vertical-rl 或 vertical-lr，块级子元素的 margin: auto 不再控制左右，而是控制“行内方向”的上下边距。也就是说：
-
margin: auto在vertical-rl中等价于margin-block: auto（即上下自动），实现的是沿新“行内轴”的居中 - 此时
margin-left/margin-right失效，margin-top/margin-bottom反而变成“块方向”，不再参与居中计算 - 必须确保子元素是块级（如
display: block），否则margin: auto对inline元素无效（比如未设置display的<img>）
示例：
.container { writing-mode: vertical-lr; height: 400px; }
.item { width: 100px; height: 100px; margin: auto; display: block; }
text-align 在 vertical-rl 下的对齐逻辑反转
text-align 的取值含义会随 writing-mode 改变：在 vertical-rl 中，“left” 实际对应物理右侧，“right” 对应物理左侧。所以：
-
text-align: center仍让内容在“行内方向”居中，即视觉上的垂直居中（适用于文本、inline或inline-block子元素） - 若想让文字靠容器顶部对齐，应设
text-align: right（不是left） - 若子元素是
block，text-align不影响它自身位置，只影响其内部文本
常见误操作：text-align: left 在 vertical-rl 容器里会让文字贴右边缘，容易误以为“没生效”。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
图片或替换元素（如 ![]()
）必须显式设 display:block
<img> 默认是 inline 元素，在 writing-mode 容器中直接写 margin: auto 无效——它不占据整行，没有“块方向”可居中。
- 必须加
display: block，让它成为块级盒，才能响应margin: auto - 如果同时用了
vertical-align或父容器有line-height，可能干扰居中效果，建议清空这些干扰属性 - 注意：
width和height必须明确指定，否则margin: auto在块方向无法计算
错误写法：img { margin: auto; }（无 display: block）→ 不居中
正确写法：img { display: block; margin: auto; width: 200px; height: 100px; }
兼容性与 fallback 建议
writing-mode 在现代浏览器（Chrome/Firefox/Safari/Edge）已无需前缀，但 IE11 及更早版本仅支持 vertical-rl 且需 -ms-writing-mode。实际项目中：
- 不要依赖
writing-mode做核心布局，它本质是排版增强，不是布局工具 - 若需降级，可用
@supports (writing-mode: vertical-rl)包裹样式，否则回退到 flex 或绝对定位方案 - 移动端 Safari 对
sideways-rl支持不稳定，优先用vertical-rl或vertical-lr
真正麻烦的不是怎么写，而是忘记 writing-mode 已把整个坐标系旋转了 90°——所有方向相关的属性都得重新读一遍文档，而不是凭直觉猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
