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获得了对相对vs绝对的更好理解

我有

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