如何在 @page 中垂直居中 div 并打印 (DomPDF & Laravel)答案

【问题标题】：How to Vertically Center a div in a @page and print (DomPDF & Laravel)如何在 @page 中垂直居中 div 并打印 (DomPDF & Laravel)
【发布时间】：2021-10-16 20:40:36
【问题描述】：

美好的一天！我目前正在使用 Laravel 8 的 DomPDF 库，以使用本机 CSS 生成可打印 PDF（因为 Bootstrap 和其他导入不适用于该库）。

我发现很难格式化某些分区以适应页面的死点。我找不到任何关于以可打印格式（例如 DomPDF）垂直居中的资源。

Margin 只处理左右两边，顶部和底部没有任何作用。

我的 CSS 示例

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

.page
{
    position: relative;
    display: flex;
}

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

.intro-title-block
{
    margin: auto;
    text-align: center;
}

DomPDF 示例片段

【问题讨论】：

标签： html css laravel dompdf

【解决方案1】：

您可以使用弹性显示设置页面样式。

.page{
  display:flex;
  align-items:center;
}

【讨论】：