Centering Slide Content with Reusable and Scoped Styles in Marp

Question

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.

Answer 1

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.