如何在Laravel的DomPDF中实现@page规则下div的垂直居中并打印

解决方案 #

DomPDF 对 Flex 布局的支持度有限，你遇到的 margin 上下不生效、垂直居中失效的问题，本质是父容器没有设置明确高度，加上 Flex 相关属性兼容性不足导致的，下面给出两种经过验证的兼容方案：

方案1：绝对定位实现（兼容性最好） #

该方案利用 DomPDF 支持度最高的定位属性实现居中，适配所有版本的 DomPDF：

@page
{
    margin: 1.5cm; /* 统一设置上下左右边距，可单独调整上下边距数值 */
    size: 8.5in 11in;
}

.page
{
    position: relative;
    /* 11英寸约等于27.94cm，减去上下各1.5cm边距，得到可打印区域高度，可根据实际效果微调数值 */
    height: 24.9cm;
}

.intro-title-block
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.page-break
{
    page-break-after: always;
}

方案2：Table 布局实现 #

如果不想用绝对定位，也可以用兼容性同样优秀的 table 布局实现垂直居中：

@page
{
    margin: 1.5cm;
    size: 8.5in 11in;
}

.page
{
    display: table;
    width: 100%;
    height: 24.9cm;
}

.intro-title-block
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.page-break
{
    page-break-after: always;
}

注意事项 #

• 不要在 DomPDF 场景下使用 Flex 做核心布局，大量 Flex 属性未被适配，很容易出现异常
• 所有需要做垂直居中的父容器必须设置固定单位的高度（cm/in/px均可，不要用百分比），DomPDF 无法自动计算未声明高度的父容器尺寸
• DomPDF 对垂直 margin 的合并规则和浏览器存在差异，不要使用 margin: auto 实现垂直居中

内容的提问来源于stack exchange，提问作者Russel