quarto revealjs presentations vertically center content in columns

[shannonpileggi]

Is there a away to vertically center content within columns in quarto revealjs presentation?

Something like this, where the slide title stays in place in top left, but content within columns is centered.

---
title: "Untitled"
format: revealjs
editor: visual
---

## Quarto

::: columns

::: {.column  width="50%"}
This

is

column 

1
:::

::: {.column  width="50%"}
This is

column 2
:::

:::

[mcanouil]

The easy part is to get vertically centered the columns contents (not vertically centered in the slide though).

1. Columns vertically aligned to the top but content of the columns vertically centered

   
   See Quarto code + CSS

   /* file: style.css */
   #vcenter {
     vertical-align: middle;
   }

   ---
   title: "Untitled"
   format:
     revealjs:
       css: style.css
   ---
   
   ## Quarto
   
   :::: {.columns}
   
   ::: {.column #vcenter width="50%"}
   
   This
   
   is
   
   column 
   
   1
   
   :::
   
   ::: {.column #vcenter width="50%"}
   This is
   
   column 2
   :::
   
   ::::
   

2. Columns and content vertically centered
   The tricky part is now to vertically centered <div class="columns">...</div> which is nested in a div with display: block;.

   
   See Quarto code + CSS

   /* file: style.css */
   .v-center-container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 90%;
   }

   ---
   title: "Untitled"
   format:
     revealjs:
       css: style.css
   ---
   
   ## Quarto
   
   :::: {.columns .v-center-container}
   
   ::: {.column width="50%"}
   
   This
   
   is
   
   column 
   
   1
   
   :::
   
   ::: {.column width="50%"}
   This is
   
   column 2
   :::
   
   ::::
   

[shannonpileggi]

Thank you @mcanouil, these are great solutions!! I really appreciate your time and both options - this is so helpful!

[michaelschulte]

Hi,

I am trying to reproduce the second example with the css (.v-center-container) and get this:

I use the above code + css example in a new file, Quarto and (R)Studio up to date ....

Thanks
Michael

[michaelschulte]

I have a short followup - this works great - thanks for the reference to the change with important ... is there a way to apply the behaviour to one of the columns only?

[mcanouil]

The same principle can be applied at any fenced divs level.
I can't make a reproducible example now though.

[michaelschulte]

hmm - doing this:

::: {.column width="50%" .v-center-container}

this happens:

[mcanouil]

Here is what you are looking for (I included everything inline).
To note, the left column is both vertically and horizontally centered.

---
title: "Untitled"
format: revealjs
---

## Quarto

::::: {.columns style='display: flex !important; height: 90%;'}

::: {.column width="50%" style='display: flex; justify-content: center; align-items: center;'}

This

is

column 

1

:::

::: {.column width="50%"}
This is

column 2
:::

::::

[michaelschulte]

Beauty! Thanks!