Reveal.js: Per slide vertical centering

[hadim]

Most of my slide are not vertically centered (I use center: false, option). How can I ask reveal.js to vertically center only one slide (by JS or CSS).

Thank you

[tpgmartin]

Hey @hadim this should be possible by adding the class "center" to any slide you want vertically centred.

[hadim]

Thank you +1

[denispeyrusaubes]

How can you add the "center" class to a slide in your markdown code ?

thanks for your response !

[bnjmnt4n]

You can see this example from the readme:

<section data-markdown>
    <script type="text/template">
    <!-- .slide: class="center" -->
        Markdown content
    </script>
</section>

Or just add the class directly as well:

<section data-markdown class="center">
    <script type="text/template">
        Markdown content
    </script>
</section>

[denispeyrusaubes]

Thank for the response...
but I need to apply this style to some specific slides, and my slides are divided in chapters I specific md files.
One slide is delimited by --- from the other
so I don't understand how to proceed in my case.

My index.html links all chapters using:

<section>
  <section data-markdown="/myfolder/mychapter.md" data-separator="^\n---\n" data-vertical="^\n\n">
Markdown body of a slide here ...
  </section>
</section>

[bnjmnt4n]

You can try placing the <!-- .slide: class="center" --> after each --- for each slide.

[denispeyrusaubes]

Strange, I've placed this code immediately after ---, and the generated html contains

<section data-markdown="" data-markdown-parsed="true" class="center present" style="top: 0px; display: block;"><!-- -->
<h2 id="le-jeu-de-test">Le jeu de test</h2>
<p>test</p>
</section>

But my text isn't vertically centered...

[bnjmnt4n]

The slide should be vertically centred, not too sure how to help you with that anymore.

[denispeyrusaubes]

is center a standard css style ?
I can't find a specific css rule defined in provided css files...

[bnjmnt4n]

The center class is used in JS to indicate that the slide should be vertically centred. See https://github.com/hakimel/reveal.js/blob/713702a0ab81d1756a30e6c14ae49afd42135541/js/reveal.js#L1650-L1659.

[denispeyrusaubes]

ok, thank you very much for your help !

[denispeyrusaubes]

Ok, I've tried on a new presentation, and the slides is centered...
But it is normal that both the title and the text are centered ? I'd like to center only my text, the title of the slide should remain on the top !

Thank you !

[bnjmnt4n]

There isn't a built in way to do that, you'll have to manually figure out the CSS and styles to make it work. The Reveal.js center will only center the whole slide.