text-align: center在打印中有效，但仅对行内内容和表格单元格生效；块级元素需配合width与margin: 0 auto，且须禁用flex/grid父容器以确保兼容性。
打印页面时元素居中，不能照搬屏幕布局那套逻辑——@media print 里很多视觉样式会被重置或忽略，尤其是 transform、flex 的交叉轴对齐、甚至部分 position: absolute 行为都不可靠。最稳的方案是回归语义+盒模型原生能力。
text-align: center 在打印中是否有效？
有效，但仅限于行内内容和表格单元格。打印引擎（如 Chrome PDF 导出、Edge 打印预览）对 text-align 支持非常一致。
- 父容器设
text-align: center，子元素是<p></p>、<span></span>、<img>（默认inline-block）都能水平居中 - 如果子元素是
display: block且没设宽度，text-align对它本身无效——它只是让内部文字居中 - 避免在打印样式里给
body或html直接加text-align: center，可能意外影响所有段落缩进
margin: 0 auto 在打印时为什么经常失效？
不是失效，而是触发条件被破坏：打印上下文常把页面宽度重置为纸张宽度（如 A4 的 210mm），而浏览器默认不给 body 设宽度，导致块级元素自动撑满，margin: 0 auto 没有剩余空间可分。
- 必须显式给居中块设
width（推荐用max-width: 80%+margin: 0 auto，兼顾不同纸张尺寸） - 禁用
display: flex或display: grid父容器——它们会覆盖margin: auto的计算逻辑 - 检查是否用了
box-sizing: border-box：若没设，padding和border会撑宽元素，导致实际宽度超限，auto失效
@media print 中绝对定位居中是否可靠？
不可靠。多数打印引擎会忽略 transform: translate(-50%, -50%)，且 top: 50% 在打印上下文中参考的是“页面区域高度”，而非可视窗口，结果常偏高或截断。
- 若必须用定位，改用
position: relative+left: 50%+margin-left: -[固定像素值]（仅适用于已知宽度的元素） - 更稳妥的做法是放弃定位，改用表格模拟：外层
display: table; width: 100%; height: 100vh;，内层display: table-cell; vertical-align: middle; text-align: center; - 注意：IE/Edge Legacy 打印中
table-cell垂直居中稳定，但现代 Chromium 内核打印对height: 100vh支持不佳，建议用固定高度如height: 297mm（A4 高）
Flexbox 在打印样式里能不能用？
能，但仅限水平居中；align-items: center 在打印中基本无效——Chrome、Firefox、Safari 的打印预览均不渲染 flex 的交叉轴对齐。
- 安全用法：
display: flex; justify-content: center;可靠实现水平居中，子元素无需设宽 - 垂直方向别依赖
align-items，改用padding-top配合预估内容高度，或回到table-cell方案 - 避免嵌套 flex 容器：打印引擎对多层 flex 计算容错率低，易出现空白或错位
- 务必在
@media print里重置可能干扰的样式，比如float: none、clear: none、position: static
真正容易被忽略的点是：打印样式表里没有“视口”概念，所有百分比单位（%、vh、vmax）都基于纸张尺寸而非屏幕，而纸张尺寸在不同打印机/驱动下可能被裁剪或缩放。所以，优先用 max-width + margin: 0 auto 这种不依赖高度的组合，比任何“全居中”方案都更鲁棒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
