如何在 @page 中垂直居中 div 并打印（DomPDF 和 Laravel）

Question

美好的一天！我目前正在使用 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 示例片段

Answer 1

您可以使用

display: table

和

display: table-cell

<div class="container">
  <div class="content">
    <!-- Your content here -->
  </div>
</div>

.container {
  display: table;
  width: 100%;
  height: 100%;
}

.content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Answer 2

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

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

Answer 3

DomPDF 不支持 Flexbox，我使用以下代码解决了它：

.page{
  position: absolute;
  transform: translateY(-50%);
}