空状态提示页面居中首选 display: flex，需设父容器 height: 100vh 及 justify-content/align-items:center；次选 margin: 0 auto（仅水平）或绝对定位+transform（脱离文档流时）；注意 text-align、max-width 和嵌套场景适配。
空状态提示页面的HTML元素居中，核心是让提示文字、图标、按钮等整体在视口内水平垂直居中，且不依赖固定尺寸、适配不同屏幕和内容长度。现代项目首选 display: flex，但需注意父容器高度和子元素行为。
用 display: flex 实现全居中（最常用）
给包裹空状态的最外层容器设为 Flex 容器，并同时启用两个方向的对齐。这是目前最可靠、语义清晰、响应式友好的方式。
- 父容器必须有明确高度（如
height: 100vh），否则align-items: center无法垂直居中 - 子元素无需设宽高或
margin: auto，justify-content和align-items直接作用于其内容流 - 如果子元素是
display: block且写了width: 100%，它会撑满父容器宽度，justify-content就失效了——此时应改用max-width限制宽度 - 示例：
.empty-state { display: flex; justify-content: center; align-items: center; height: 100vh; } .content { max-width: 400px; text-align: center; }
margin: 0 auto 只适用于定宽块级容器
如果你的空状态是一个固定宽度的卡片（比如 width: 320px），且只要求水平居中（垂直靠其他方式补足），margin: 0 auto 仍可一用，但它本身不处理垂直方向。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须显式设置
width或max-width，设成100%就等于没设 - 父容器不能是
display: flex或display: grid，否则margin: auto的自动分配逻辑会被覆盖 - 常见错误：给空状态
div写了margin: 0 auto却没动height，结果只水平居中、顶部贴边——这时得额外加padding-top或用别的垂直方案配合
绝对定位 + transform: translate(-50%, -50%)（适合模态类空状态）
当空状态需要脱离文档流（比如浮在列表上方、遮罩层内），或父容器高度不可控时，这个组合更可控。
- 父容器必须设
position: relative（或absolute/fixed），否则top: 50%会相对于视口计算，滚动后偏移 - 子元素必须同时写
position: absolute、top: 50%、left: 50%和transform: translate(-50%, -50%)，缺一不可 - 它不关心子元素宽高是否已知，哪怕内容动态加载、尺寸变化，依然保持居中
- 注意可访问性：脱离文档流的元素可能影响焦点顺序和屏幕阅读器读取，建议加
role="region"和aria-label
文本和图标单独居中要区分类型
空状态里常混有文字、SVG 图标、按钮，它们的居中逻辑不同，不能统一套用一个规则。
- 文字本身用
text-align: center（设在父容器上），不是设在p或span上 - SVG 或
img默认是行内元素，若想让它和文字一起居中，要么设父容器text-align: center，要么把它转成块级：display: block; margin: 0 auto; - 按钮如果是
inline或inline-block，也吃text-align: center；但如果是display: block，就得靠margin: 0 auto或 Flex 控制 - 多行文字垂直居中别用
line-height（只适合单行），直接用 Flex 父容器包一层更稳
真正容易被忽略的是：空状态往往嵌套在滚动区域（如 main 或列表容器）里，此时 100vh 会超出可视区，flex 的 height 应该基于父容器实际高度而非视口；另外，所有居中方案都默认内容“有足够空间”，一旦文字过长换行、图标过大，max-width 和 padding 的配合比居中本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
