证书打印问题：图片在第1页，动态居中文字在第2页（附HTML代码）

看起来你遇到的核心问题是打印时图片和定位的文本被分到了不同页面，这大概率是因为浏览器的分页算法把两个元素拆开了，或者你的定位方式导致文本脱离了图片所在的块上下文。我给你几个针对性的解决办法：

1. 确保图片和文本处于同一个不可拆分的容器 #

把图片和文本容器包裹在一个父容器里，并用CSS强制这个容器在打印时不被拆分：

@media print {
  #AtestadoTecnico {
    page-break-inside: avoid; /* 禁止容器内部分页 */
    position: relative; /* 让内部绝对定位的元素基于这个容器定位 */
    display: block;
    height: 685px; /* 和图片高度一致，确保容器能包裹内容 */
  }
}

2. 修正文本的定位方式 #

如果你的.txtAtestadoTecnico用了position:absolute，一定要确保它的父容器（也就是#AtestadoTecnico）是position:relative，这样文本才会相对于图片所在的容器定位，而不是整个页面。调整文本容器的样式：

.txtAtestadoTecnico {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完美居中 */
  z-index: 1; /* 确保文本在图片上方 */
  margin: 0; /* 去掉默认边距，避免额外空间导致分页 */
}

3. 调整打印的页面边距和尺寸 #

有时候浏览器默认的打印边距会把内容挤到下一页，你可以在打印样式里设置合适的页面尺寸和边距：

@media print {
  @page {
    size: A4; /* 或者你的证书实际尺寸 */
    margin: 0; /* 去掉默认边距，避免内容被裁切或分页 */
  }
  body {
    margin: 0;
  }
}

4. 检查图片的加载和布局 #

确保图片没有因为加载延迟或者height/width设置不当导致容器高度计算错误。可以给图片添加display:block，去掉默认的行内元素间距：

.imgAtestadoTecnico {
  display: block;
  width: 100%; /* 如果需要自适应打印页面，用width:100%替代固定宽度 */
  height: auto; /* 保持图片比例，避免拉伸 */
}

把这些样式结合起来，你的完整HTML结构和样式应该类似这样：

<div id="DivImpressao">
  <section id="AtestadoTecnico">
    <img id="imgAtestado" src="~/Images/Site/AtestadoTecnico.png" runat="server" class="imgAtestadoTecnico" />
    <div class="txtAtestadoTecnico">
      <!-- 你的动态文本内容 -->
    </div>
  </section>
</div>

<style>
#AtestadoTecnico {
  position: relative;
  display: block;
  max-width: 100%;
  height: auto;
}
.imgAtestadoTecnico {
  display: block;
  width: 100%;
  height: auto;
}
.txtAtestadoTecnico {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  margin: 0;
  text-align: center;
}

@media print {
  #AtestadoTecnico {
    page-break-inside: avoid;
  }
  @page {
    size: A4;
    margin: 0;
  }
  body {
    margin: 0;
  }
}
</style>

这样调整后，图片和文本会被浏览器视为一个整体，打印时就不会被拆分到不同页面了。记得测试打印预览，不同浏览器的打印渲染可能略有差异，必要时可以针对特定浏览器做微调。

内容的提问来源于stack exchange，提问作者G. Sena