如何在Quatro与RevealJS中实现图片垂直居中并设置90%宽度

你之前的代码没生效，主要是布局逻辑和宽度设置的精准度不够，给你两个可行方案：

方案一：直接在布局里加样式（快速解决） #

修改布局块的样式，同时调整图片宽度的单位，确保效果精准：

## Slide Title

::: {layout="[1]" style="display: flex; align-items: center; justify-content: center; height: 100vh;"}
![](MyImage.svg){width="90vw"}
:::

• 调整说明：
  • layout="[1]"改为单栏布局，避免多栏布局的间距干扰垂直居中效果
  • style里的flex布局参数，直接让容器内元素同时实现垂直+水平居中，height:100vh确保容器占满整个幻灯片高度
  • width="90vw"让图片占**视图宽度（即幻灯片整体宽度）**的90%，比单纯写90%更贴合需求

方案二：自定义CSS类（适合多幻灯片复用） #

如果有很多幻灯片需要相同的图片排版，用CSS类更高效：

1. 先在演示文稿开头的YAML配置里引入自定义CSS：

---
title: "你的演示文稿标题"
format: revealjs  # 根据你实际用的幻灯片格式调整，比如ioslides
css: custom.css
---

2. 新建custom.css文件，写入以下样式：

.center-full-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.center-full-img img {
  width: 90%;
}

3. 后续在幻灯片里直接调用这个类即可：

## Slide Title

::: {.center-full-img}
![](MyImage.svg)
:::

小提示：如果用的是beamer这类其他幻灯片格式，可能需要微调CSS属性，但核心逻辑都是通过flex布局实现垂直居中，确保图片宽度相对幻灯片整体占比为90%。

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