htmlcssmarkdownpresentationmarp

Centering Slide Content with Reusable and Scoped Styles in Marp


How can I center the slide content with reusable and scoped to the specific slide without repeating myself in Marp?

I had some success using something like this, but it only works if I copy and paste it on all the other slides:

---

<style scoped>
section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

</style>

# Questions

---

I tried to apply it with @apply and using class, but with no success.


Solution

  • To center the slide content in Marp without repeating the code on every slide, you can use front-matter with a custom class and then apply this class to specific slides. Here is an example:

    ---
    marp: true
    style: |
      section.centered {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
      }
    ---
    
    # Regular Slide
    
    - Regular text
    
    ---
    
    <!-- _class: centered -->
    
    # Centered Slide
    
    - Centered text
    

    This approach allows you to define the styling once in the front-matter and reuse it by applying the class centered to any slide that you want to center.