分页符上打印页面上的 CSS 垂直居中容器答案

【问题标题】：CSS vertical centering containers on printed pages on page break分页符上打印页面上的 CSS 垂直居中容器
【发布时间】：2014-01-26 07:09:25
【问题描述】：

如果打印出来时碰到新页面，有没有办法将容器垂直居中？

如图所示，容器 A 可能会变得太大，以至于 A 和 B 将占据各自的页面。发生这种情况时，我希望 B 或两者都居中。

+----------------+       +----------------+   +----------------+
| +------------+ |       |                |   |                |
| |            | |       | +------------+ |   |                |
| |     A      | |       | |            | |   |                |
| |            | |       | |            | |   | +------------+ |
| +------------+ |       | |            | |   | |            | |
|                | +---> | |     A      | |   | |     B      | |
| +------------+ |       | |            | |   | |            | |
| |            | |       | |            | |   | +------------+ |
| |     B      | |       | |            | |   |                |
| |            | |       | +------------+ |   |                |
| +------------+ |       |                |   |                |
+----------------+       +----------------+   +----------------+

我们正在使用wkhtmltopdf 来生成 PDF。在我们的例子中，从 PDF 打印就足够了。但据我所知，wkhtmltopdf 不支持这样的居中。所以我想知道这是否可以通过 css 和/或 javascript 来实现。

一个想法是计算容器的高度并在 JS 中设置适当的上边距。但这需要知道容器何时/是否移动到下一页，我假设？

【问题讨论】：

你没有描述你想从哪里打印。假设您想从浏览器打印，我会说不，因为用于打印媒体的 CSS 在几乎所有常见的浏览器中都非常参差不齐。但是，princexml 应该支持您的请求，这是我们为类似问题选择的路径：我们只是提供一个链接来下载从实际页面的 HTML 生成的 pdf，然后使用 Princexml 在服务器端创建 pdf。不幸的是，这也意味着您无法自动适应当前打印机的页面大小。
@bertbruynooghe 我们使用wkhtmltopdf 来生成PDF。据我所知，没有办法这样做。在我们的例子中，从 PDF 打印就足够了。我会看看princexml。谢谢！

标签： javascript css printing pdf-generation wkhtmltopdf

【解决方案1】：

我是这样解决这个问题的：

html, body{margin: 0; padding: 0;}
.page{box-sizing: border-box; height: 100%; width: 100%; border: 1px solid transparent; page-break-after: always;}
.page-middle{height: 100%; width: 100%; display: table;}
.page-middle-inner{height: 100%; width: 100%; display: table-cell; vertical-align: middle;}

你可能注意到我使用了border: 1px solid transparent； .我真的无法解释，但由于某种原因，当我删除此边框时，某些页面会转到另一个页面。

【讨论】：

您好，我正在尝试根据您的回答实施解决方案，但无法完全发挥作用。可以发一下对应的html吗？
我没有那个代码了，但它必须是这样的

【解决方案2】：

看起来浏览器对您的屏幕和一张纸没有任何区别：它知道每种介质的大小。

Demo here，在 Firefox 和 Chrome 中测试。

我尝试了一种简单的居中技术（height:100% 和 vertical-align:middle 在表格中）并且效果很好。唯一的问题是所有个容器每个都会占用一个页面。

您可以仅为打印机设置样式，如下所示：

@media print {
    html, body, .page {
        height: 100%;
        padding: 0;
        margin: 0;
    }
}

【讨论】：

【解决方案3】：

这是一个很长的镜头，但你可以使用 js 来做到这一点。

计算容器大小。您已经知道纸张尺寸。

所以你所要做的就是添加

"page-break-after: always"

当您的两个元素不适合第二个元素的同一页面时，然后使用

将边距附加到每个元素

calcuated_value = (total_size - element_size) / 2

$('.element_name).css("margin:"+calculated_value"+" auto;")

希望这行得通。

【讨论】：

【解决方案4】：

据我所知，浏览器目前不支持这样的东西。这里的问题是浏览器无法知道硬件如何为数千种不同的打印机工作。

除非操作系统向每台打印机公开 API，这是永远不会发生的。

【讨论】：

一个想法是计算容器的高度并在 JS 中设置适当的上边距。但这需要知道容器何时/是否移动到下一页，我假设？