flexbox垂直居中需同时设置justify-content:center和align-items:center，并确保父容器有明确高度；仅align-items:center无效，因它只作用于直接子元素且依赖容器高度。
Flexbox 垂直居中为什么不能只靠 align-items: center
因为 align-items 只对 flex 容器的直接子元素生效，且前提是容器本身有明确高度（或能被撑开）。在编辑器场景中，内容区域常是动态加载、高度不确定的，仅设 align-items: center 会导致内容贴顶或溢出——尤其当父容器未设 height: 100% 或未脱离文档流时。
真正起效的组合是：display: flex + flex-direction: column + justify-content: center + 父容器高度可控。但要注意：若编辑器外层用了 position: absolute 或嵌套了 iframe，还必须确保该容器的 height 不为 auto。
编辑器根容器必须显式设置高度和最小高度
多数 HTML 编辑器（如 TinyMCE、Quill、自研富文本框）默认外层是 div，无固定尺寸。Flex 垂直居中会失效，除非你控制它的“可用空间”。
- 给编辑器最外层容器加
style="height: 500px; min-height: 300px;"（数值按需调整） - 若用 CSS 类，确保它不被编辑器 JS 动态覆盖（例如 Quill 的
.ql-container需加!important或提高选择器权重） - 响应式场景下，改用
min-height: 100vh，但注意vh在 iOS Safari 中可能因地址栏缩放抖动，可补min-height: -webkit-fill-available
justify-content: center 和 align-items: center 要同时用才真居中
单列编辑器内容（比如一个 div#editor）要完全水平+垂直居中，必须两者并存；否则只居中一个方向。常见错误是只写 justify-content，结果文字左对齐、垂直居中——这其实是“垂直居中但未水平居中”。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
示例最小可行结构：
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 400px;"> <div id="editor"></div> </div>
注意：flex-direction: column 让 justify-content 控制垂直轴，align-items 控制水平轴；若用 row，则角色互换——别硬套“justify=垂直”的经验。
编辑器内容区自身不能设 height: 100% 否则会破坏滚动
很多人为了“撑满”给编辑器内容区（如 .ql-editor 或 contenteditable 元素）加 height: 100%，结果导致无法滚动、光标错位、输入卡顿。Flex 居中只需作用于容器，内容区应保持 height: auto 并允许自然增长。
- 禁止对
contenteditable元素设固定高或height: 100% - 若需限制最大高度并启用滚动，用
max-height: 300px; overflow-y: auto;，而非height - 滚动条出现时，
justify-content: center仍会让初始内容居中，新增内容会自然追加到底部——这是预期行为，不是 bug
真正难处理的是“空状态居中 + 有内容后顶部对齐”的混合需求，那得用 JS 监听内容变化，动态切 class，纯 CSS 无解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
