如何在PHP的mPDF中实现文本在页面整体居中？

我来帮你搞定这个mPDF里页面整体居中的问题！看了你的代码，发现几个关键问题，咱们一步步修正：

问题分析 #

1. ID不匹配：你的CSS里写的是#centrar，但HTML里的div用的是id="center"，这导致CSS样式根本没作用到目标元素上，这是首要问题。
2. 居中方式不对：仅设置body { text-align: center }只能让行内元素水平居中，没法实现整个页面（垂直+水平）的居中效果。

修正方案 #

方案1：使用Flex布局（mPDF 7.0+推荐） #

这种方式简洁，且大部分新版mPDF都支持Flex属性。

修正后的CSS（example1.css）：

body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 占满页面高度 */
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
}

#centrar {
  width: 80%;
  background-color: #000;
  color: #fff; /* 加白色文字，避免黑色背景看不到内容 */
  text-align: center; /* 内部文本水平居中 */
}

修正后的PHP代码片段：

<?php 
require_once __DIR__ . '/../bootstrap.php'; 
$mpdf = new \Mpdf\Mpdf(); 
$mpdf->SetDisplayMode('fullwidth'); 
$stylesheet = '<style>' . file_get_contents('example1.css') . '</style>'; 
$mpdf->WriteHTML($stylesheet, 1); 
// 这里把div的id改成和CSS匹配的centrar
$mpdf->WriteHTML('<div id="centrar"> Hello World </div>', 2); 
$mpdf->Output('filename.pdf');

方案2：绝对定位（兼容更多旧版mPDF） #

如果你的mPDF版本较低，Flex支持不好，可以用绝对定位的方式：

CSS代码：

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

#centrar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让元素自身居中 */
  width: 80%;
  background-color: #000;
  color: #fff;
  text-align: center;
}

方案3：Table布局（最兼容的老式方法） #

如果以上两种都不生效，试试table布局，几乎所有mPDF版本都支持：

CSS代码：

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

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

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

#centrar {
  display: inline-block;
  width: 80%;
  background-color: #000;
  color: #fff;
}

PHP里的HTML部分改成：

<div class="page-table">
  <div class="table-cell">
    <div id="centrar"> Hello World </div>
  </div>
</div>

关键注意事项 #

• 确保CSS选择器和HTML元素的ID/class完全匹配，这是很多样式不生效的常见原因。
• 如果是旧版mPDF，建议先查一下官方文档确认支持的CSS属性，避免用不兼容的写法。

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