如何在flexbox容器中垂直居中经scale缩放的div元素？

现有实现逻辑 #

• 采用分屏布局：右侧区域为fixed定位的非滚动内容预览区，左侧为支持滚动的Markdown编辑器，可通过配置和样式调整输出文本效果，编辑完成后支持直接打印内容
• 打印预览实现：创建类名为content的div作为待打印容器，设置尺寸为210mm×297mm模拟标准A4纸张规格，期望通过scale属性缩小A4尺寸容器，实现完整页面预览，同时让缩放后的容器在预览区内垂直居中
• 存在问题：直接为.content类设置width、height、scale属性时，会出现布局错位、无法正常居中的异常表现

问题根源 #

CSS transform: scale() 仅改变元素的视觉渲染尺寸，元素在文档流中占据的原始空间不会随缩放同步调整，直接使用常规居中方案会产生位置偏移。

可直接复用的实现代码 #

1. 先配置右侧预览区容器样式：

/* 右侧预览区 */
.preview {
  position: fixed;
  right: 0;
  top: 0;
  /* 按实际分屏需求调整宽度，示例为占视口40%宽度 */
  width: 40vw;
  height: 100vh;
  background: #f3f4f6;
  /* 用flex做居中基础布局 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

2. 配置A4内容容器基础样式，通过transform-origin指定缩放锚点为中心，动态计算缩放值保证完整展示：

/* A4待打印容器 */
.content {
  width: 210mm;
  height: 297mm;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  /* 缩放锚点设为中心，避免偏移 */
  transform-origin: center center;
  /* 纯CSS静态缩放适配：预览区高度减去上下各20px边距后，和A4高度做比得到缩放值 */
  transform: scale(calc((100vh - 40px) / 297mm));
}

3. （多尺寸适配可选）通过JS动态计算缩放比，适配不同宽度的预览区，保证A4纸不会被裁切：

const previewContainer = document.querySelector('.preview')
const a4Content = document.querySelector('.content')

const updatePreviewScale = () => {
  // 预留40px总边距，避免内容贴边
  const availableWidth = previewContainer.clientWidth - 40
  const availableHeight = previewContainer.clientHeight - 40
  // 按96DPI标准换算A4物理尺寸到像素：1mm ≈ 3.7795px
  const a4PixelWidth = 210 * 3.7795
  const a4PixelHeight = 297 * 3.7795
  // 取宽高缩放比的较小值，保证完整展示
  const scaleValue = Math.min(availableWidth / a4PixelWidth, availableHeight / a4PixelHeight)
  a4Content.style.transform = `scale(${scaleValue})`
}

// 初始化时执行，窗口尺寸变化时自动适配
updatePreviewScale()
window.addEventListener('resize', updatePreviewScale)

注意：需要额外配置打印媒体查询，避免预览缩放效果影响实际打印输出：

@media print {
  /* 打印时隐藏编辑、预览区域 */
  .editor, .preview {
    display: none !important;
  }
  /* 重置A4容器的缩放、阴影效果，按实际A4尺寸输出 */
  .content {
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
}

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