CSS vertical centering containers on printed pages on page break

Question

Is there a way to vertically center a container if it's bumped to a new page when printed out?

As the diagram shows, container A may grow too big that A and B will occupy their own pages. When that happens I want B or both to be centered.

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

We are using wkhtmltopdf to generate the PDFs. In our case printing from the PDF is enough. But as far as I know wkhtmltopdf doesn't support centering like this. So I'm wondering if this can be achieved via css and/or javascript.

One idea is calculating the container's height and set the appropriate top margin in JS. But this requires the knowledge of when/if the container is moved to the next page, I assume?

Answer 1

Here is how I solved this issue:

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;}

As you may be noticed I used border: 1px solid transparent; . I really can't explain it but for some reason when I remove this border some pages goes out to another page.

Answer 2

It looks like the browser doesn't make any distinction between your screen and a sheet of paper: it knows each medium's size.

Demo here, tested in Firefox, Chrome and Safari.

I tried with a simple centering technique (height:100% and vertical-align:middle in a table) and it works perfectly. The only issue is that all containers will occupy a page each.

You can set the styles just for the printer, kind of like this:

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