垂直对齐身体中心

Question

我的目的是在打印文件时垂直打印内容。但在我这样做之前，我将编写以下“html，body”标签将页面下载到1，我应用了以下question-and-answer样式。 然后，当我简单地说“margin：50％auto”时，此功能不能按照我想要的方式工作。当我尝试更改“html，body”标签的内容时，页数可以是2,3而不是1.感谢您的帮助。

注意：我尝试将此元素置于主体中心=＆gt;“＃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;
}