用于打印布局的 CSS 垂直居中

Question

我正在尝试将带有图像的 div 和一些带有文本的嵌套 div 垂直居中。 (创建封面)

打印格式需要 CSS。我有这样的东西:

<div class="wrapper">
    <div class="content">
        <img src="banner.png">
        <span>some title text</span>
   </div>
</div>
<div class="pageBreak">new page...</div>

CSS

 @media print {
    .wrapper {
       position:fixed;
       top: 50%;
    }
    .pageBreak {
       page-break-before: always;
    }
}

虽然可能无关紧要，但我正在使用 css 库的基础。

执行此操作的最佳方法是什么？

Answer 1

啊，经过大量的试验和错误，我想通了......并且更好地理解了嵌套 div 的相对与绝对

我有

@media print {
  .coverPage { // outerDiv
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    page-break-after: always;
  }

  .coverPageWrapper { // innerDiv
    position: absolute;
    top: 40%;
    width: 100%;
    height: 100%;
  }
}