HTML打印导出A4 PDF时如何让两张表格垂直居中且位置对齐

算力阿峰

2026-10-1

解决方案

问题根源

浏览器默认的body、元素边距会干扰表格定位
@page规则的默认打印边距不同浏览器标准不统一
仅margin: auto在打印场景下无法可靠实现垂直居中，垂直方向的auto margin渲染逻辑和屏幕展示有差异
原规则给所有表格加了page-break-after: always，会导致第二张表格后额外生成空白页

修改后的代码

HTML代码

<body>
<!-- 1st table: -->
<table>
<tr> <td>content of the first table</td>
<!-- some other tr's and td's -->
</tr>
</table>
<!-- 2nd table: -->
<table>
<tr> <td>content of the second table</td>
<!-- some other tr's and td's -->
</tr>
</table>
</body>

CSS代码

/* 全局重置默认样式，消除浏览器自带边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

table {
  width:7cm; 
  height:15cm; 
  border: 1px solid;
  /* 水平居中 */
  margin-left: auto;
  margin-right: auto;
  /* 固定上边距实现垂直居中：A4纵向高度29.7cm，(29.7-15)/2=7.35cm */
  margin-top: 7.35cm;
}

@media print {
  @page { 
    size: A4 portrait;
    /* 关闭页面默认边距，完全自主控制元素位置 */
    margin: 0;
  }
  /* 仅第一张表格后加分页符 */
  table:first-of-type {
    page-break-after: always;
  }
  /* 避免第二张表格后生成多余空白页 */
  table:last-of-type {
    page-break-after: avoid;
  }
}