无需landscape类，CSS实现纵向PDF内容90度旋转方案咨询

核心思路 #

借助CSS的旋转变换配合定位规则，在保持@page纵向纸张设置不变的前提下，将页面内容旋转90度并适配纵向页面的空间，无需额外添加landscape类。

具体代码实现 #

假设页面内容容器为.page-content，可参考以下代码：

/* 维持@page的纵向纸张设置 */
@page {
  size: A4 portrait; /* 替换为你需要的纵向纸张尺寸 */
  margin: 0; /* 清除默认边距，便于后续位置调整 */
}

/* 仅在打印/PDF生成场景生效 */
@media print {
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }

  .page-content {
    /* 顺时针旋转90度，如需逆时针可改为rotate(-90deg) */
    transform: rotate(90deg);
    /* 以容器中心为旋转原点 */
    transform-origin: center center;
    /* 绝对定位实现位置调整 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 旋转后内容尺寸与原纵向页面高宽互换，以A4为例：原宽210mm、高297mm → 旋转后宽297mm、高210mm */
    width: 297mm;
    height: 210mm;
    /* 反向偏移50%实现内容居中 */
    margin-top: -105mm;
    margin-left: -148.5mm;
    overflow: hidden;
  }
}

关键细节说明 #

• 旋转原点：transform-origin: center center是核心，确保内容旋转后不会偏离页面范围。
• 尺寸适配：旋转后内容的宽高需要和原纵向页面的高宽互换，才能填满整个页面空间。
• 居中定位：通过top: 50%+left: 50%搭配负margin，让旋转后的内容精准居中在纵向页面内。
• 场景限制：用@media print包裹规则，避免影响网页正常浏览效果。

注意事项 #

不同PDF生成工具（如Chrome打印、wkhtmltopdf）对CSS变换的支持存在细微差异，建议根据实际工具测试调整尺寸和偏移值；若需要保留页面边距，可在@page中设置margin，并同步调整.page-content的尺寸和偏移量（减去对应边距数值）。

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