Vertically and horizontally centered content in slides (revealjs)

[awav]

Hello everyone,

Can anyone advise how to place content on all slides (or one slide) such that text and images would be in the center? I've tried suggestions from here #1386, and they don't work at all. I've mananged to center an image and the text only by using ::: {style="text-align: center;}.

Thanks!

[mcanouil]

#1386 is for centering content of a column, not the content of a slide.

Inspired from @pat-s post on Twitter¹:

---
format:
  revealjs:
    include-in-header: 
      text: |
        <style>
        .center-xy {
          margin: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          -ms-transform: translateY(-50%), translateX(-50%);
          transform: translateY(-50%), translateX(-50%);
        }
        </style>
---

## Slide 1

::: {.center-xy}

Text

:::

Footnotes

1. https://twitter.com/patscli/status/1582832917302358016 ↩

[mcanouil]

Again, you need to provide a complete and fully reproducible example.
Look at what I shared, you can copy/paste it and see the results.
We can't with what you shared without having to modify it hopefully the same way as your document that did not work.

PS: no need to ping/tag people within a thread and at every answer. We are watching basically everything, so you simply make your notifications more prominent for no clear reasons.
It's a bit like yelling someone's name in the middle of the conversation with that same person, in some aspects.

[RoyiAvital]

No need for new code, on your code, can you set the image width?

What I tried, and didn't work, is:

---
format:
  revealjs:
    include-in-header: 
      text: |
        <style>
        .v-center-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 90%;
        }
        </style>
---

## Slide 1

::: {.v-center-container}

![](https://quarto.org/quarto.png){width="90%"}

:::

[mcanouil]

It's because of the flex component, you can't use relative width, because it is no longer relative to the whole slide, but to the .v-center-container div, so you have to use absolute dimensions.

[RoyiAvital]

I saw a nice trick:

## Vertically Aligned 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus ultrices
leo sit amet accumsan.

::: {layout="[[-1], [1], [-1]]"}

![](https://placeholder.pics/svg/200){fig-align="center"}

:::

Yet it doesn't seem to work on the latest version.
The image is still not vertically centered.

[RoyiAvital]

I think I found something:

![](https://placeholder.pics/svg/200){.absolute left=0 right=0 bottom=0 top=0 height="90%" style="margin: auto auto;"}

For the above, one can set the height factor while the image will be horizontally and vertically centered relatively to the slide.

Based on How to Center an Absolute Positioned Element Vertically and Horizontally with CSS.

[JonSilas]

I think this is out of date now, I just use the following.

---
format:
  revealjs: 
    center: true
---

## Slide 1

Text

[mcanouil]

No, it isn't.
This option is centering everything.

#2951 (comment)	#2951 (comment)

[JonSilas]

Quite right! My mistake.

[chuxinyuan]

#1386 is for centering content of a column, not the content of a slide.

Inspired from @pat-s post on Twitter1:

---
format:
  revealjs:
    include-in-header: 
      text: |
        <style>
        .center-xy {
          margin: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          -ms-transform: translateY(-50%), translateX(-50%);
          transform: translateY(-50%), translateX(-50%);
        }
        </style>
---

## Slide 1

::: {.center-xy}

Text

:::

Footnotes

1. https://twitter.com/patscli/status/1582832917302358016 [↩](#user-content-fnref-1-47fea18becbc2ec2d7ef6b1de56dc0af)

1. If number-sections: true, how can I keep this slide unaffected?
2. This has no effect on font size，why？

    include-in-header: 
      text: |
        <style>
        .font {
          font-size: 150px;
        }
        </style>

[mcanouil]

@chuxinyuan could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[chuxinyuan]

---
title: "Quarto slides"
lang: zh
format:
  revealjs: 
    number-sections: true
    number-depth: 3
    include-in-header: 
      text: |
        <style>
        .font {
          font-size: 200px;
        }
        .center-xy {
          margin: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          -ms-transform: translateY(-50%), translateX(-50%);
          transform: translateY(-50%), translateX(-50%);
        }
        </style>
---


## 致谢 {number-sections="false"}

::: {.center-xy}
谢谢
:::

1. font-size: 200px Have no effect to font.
2. I want to remove "1 致谢".

[mcanouil]

Could you format your example exactly as I showed?