垂直對齊身體中心

Question

我的目的是在打印文件時垂直打印內容。 但在此之前，我將編寫以下“html, body”標簽以將頁面下載到 1，我應用了以下問答樣式。 然后，當我簡單地說“保證金：50% 自動”時，此功能無法按我希望的方式工作。 當我嘗試更改“html, body”標簽的內容時，頁數可以是2,3而不是1。謝謝你的幫助。

注意：我嘗試將此元素置於身體中心 =>"#containerDiv"

JSFiddle

 html, body { width: 210mm; height: 50mm; padding: 0 !important; margin: 0 !important; overflow: hidden; border: 1px solid black; display: table; } #containerDiv { margin: 50% auto; }

 <div style="background:blue" id="containerDiv"> <div style="background:red; height:200px;width:200px;" id="innerDiv"></div> </div>

Answer 1

添加屬性display: table; 到

html, body {
    width: 210mm;
    height: 50mm;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden;
    border:1px solid black;
}

並添加

display: table-cell;
vertical-align: middle;

進入

#containerDiv{
    margin:10% auto;
}