打印页面时如何让未满页的文章内容实现垂直居中显示？

实现方案 #

你可以选择CSS纯样式实现，或者JS动态判断的方案，两种都可以兼容你现有的打印样式。

方案1：纯CSS实现（简单无需脚本）

首先给所有需要打印的内容套一个外层容器：

<div class="print-content">
  <!-- 你的所有文章内容放在此处 -->
</div>

然后修改你的打印样式，在原有@media print代码块中新增以下规则即可：

@media print {
  /* 你原有的打印样式保留 */
  h2 {
    page-break-before: always;
  }
  pre, blockquote,table, figure {
    page-break-inside: avoid;
  }
  h1, h2, h3, h4, h5 {
    page-break-after: avoid;
    page-break-inside:avoid;
  }
  h1+p, h2+p, h3+p {
    page-break-before: avoid;
  }

  /* 新增居中相关样式 */
  @page {
    size: A4; /* 可根据需求调整纸张尺寸 */
    margin: 2cm; /* 自定义打印页边距 */
  }
  html, body {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .print-content {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

这个方案适合大部分场景，内容不满一页时会自动垂直居中，内容超过一页时会自动正常分页。

方案2：JS动态判断（兼容极端场景）

如果担心纯CSS方案在内容过长时出现排版异常，可以用JS在打印前动态判断内容高度，只在内容不满一页时添加居中样式：
首先还是要给内容套外层容器.print-content，然后添加JS代码：

// 打印前判断是否需要居中
window.addEventListener('beforeprint', () => {
  const content = document.querySelector('.print-content');
  // 可根据你设置的纸张尺寸和边距调整单页可用高度，这里以A4纸边距2cm为例，可用高度约为800px
  const singlePageHeight = 800;
  const contentHeight = content.offsetHeight;
  content.classList.toggle('print-center', contentHeight < singlePageHeight);
});

// 打印后清除居中样式
window.addEventListener('afterprint', () => {
  document.querySelector('.print-content').classList.remove('print-center');
});

然后在打印样式中添加对应规则：

@media print {
  /* 原有样式不变 */
  .print-content.print-center {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

效果对比 #

错误效果（内容靠顶部对齐）：

正确效果（内容垂直居中）：

内容的提问来源于stack exchange，提问作者ttrasn