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%;
  }
}