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

啊我想通了大量的試驗和錯誤之後...並更好地瞭解相對VS絕對嵌套的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%; 
    } 
}