Quarto revealjs格式演示文稿如何单独设置图片垂直居中

你之前尝试的方法不生效是有明确原因的：

• vertical-align: middle仅在行内格式上下文、表格单元格布局下生效，Reveal.js默认幻灯片是块级文档流，直接给图片加这个属性不会有任何效果
• 手动写死padding-top/margin-top像素值的方法本质是硬凑位置，一旦屏幕分辨率、图片尺寸、同页其他内容高度变化，位置就会偏移，完全没有自适应能力
• 给整页幻灯片加.center类的逻辑是把整个内容容器改成弹性布局做居中，必然会影响同页所有标题、文本、列表的位置，没法单独作用于图片。

下面两种方案都只会作用于目标图片，完全不会改动同页其他内容的默认布局：

方案1：原生属性实现（零额外配置，推荐优先用） #

Quarto针对Reveal.js输出预置了元素定位辅助类，不需要写额外CSS文件，直接在图片属性里加参数就能实现精准垂直居中：

![](img/path_to_img.svg){fig-align="center" height="200" .absolute top="50%" style="transform: translateY(-50%);"}

参数说明：

• .absolute：将图片设置为绝对定位，脱离普通文档流，不会挤压、偏移同页其他元素的位置
• top="50%"：将图片上边缘定位到幻灯片垂直方向的中点位置
• transform: translateY(-50%)：将图片向上偏移自身高度的50%，自动抵消定位偏差，不管图片尺寸、屏幕比例怎么变，都能保持精准垂直居中
• 原有fig-align="center"的水平居中效果完全不受影响

如果不想让图片遮挡同页的文本内容，只需要把图片代码放在幻灯片所有内容的最末尾即可。

方案2：自定义类实现（适合多场景复用） #

如果需要多次用到单图垂直居中效果，可以自定义一个专用类，一次配置后续直接调用：

1. 首先在文档的YAML头信息中声明自定义CSS文件：

format:
  revealjs:
    css: custom.css

2. 在文档同目录下新建custom.css，写入以下样式规则：

.single-img-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 如果需要把图片放在内容层下方当背景，就保留下面这行，否则删掉 */
  z-index: -1;
}

3. 后续插入图片时直接挂载这个类即可，不需要额外写内联样式：

![](img/path_to_img.svg){height="200" .single-img-center}

这个类会同时实现图片的水平+垂直居中，且不会对同页其他元素的布局产生任何影响。

避坑提示 #

• 不要给图片外层包裹flex布局的容器做居中，会破坏Reveal.js默认的内容间距规则，极易导致同页其他元素错位
• 不要使用固定像素值的边距做居中，不同放映设备的分辨率、缩放比例不同，写死的数值必然出现偏移
• 上述两种方案不会和幻灯片的页码、页眉页脚、控制按钮等内置元素产生位置冲突。

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