如果将容器在打印时碰到新页面，是否可以使容器垂直居中？
如图所示，容器A可能太大，以至于A和B将占据它们自己的页面。发生这种情况时，我希望B或两者都居中。
+----------------+ +----------------+ +----------------+
| +------------+ | | | | |
| | | | | +------------+ | | |
| | A | | | | | | | |
| | | | | | | | | +------------+ |
| +------------+ | | | | | | | | |
| | +---> | | A | | | | B | |
| +------------+ | | | | | | | | |
| | | | | | | | | +------------+ |
| | B | | | | | | | |
| | | | | +------------+ | | |
| +------------+ | | | | |
+----------------+ +----------------+ +----------------+
我们正在使用wkhtmltopdf生成PDF。在我们的情况下，从PDF打印就足够了。但据我所知wkhtmltopdf不支持像这样居中。所以我想知道是否可以通过CSS和/或javascript来实现。
一种想法是计算容器的高度并在JS中设置适当的顶部边距。但这需要知道何时/是否将容器移动到下一页，我认为是？
最佳答案
看来浏览器在您的屏幕和一张纸之间没有任何区别:它知道每种介质的尺寸。
Demo here，已在Firefox和Chrome中测试。
我尝试了一种简单的居中技术(表中的height:100%和vertical-align:middle)，并且效果很好。唯一的问题是所有容器都将占据一个页面。
您可以为打印机设置样式，如下所示:
@media print {
html, body, .page {
height: 100%;
padding: 0;
margin: 0;
}
}