如何在Marp中用可复用且作用域限定的样式居中幻灯片内容

核心思路 #

通过全局定义可复用的CSS类，给需要居中的幻灯片单独绑定类名，既能实现样式复用，又能确保样式仅作用于目标幻灯片。

具体步骤 #

1. 在文档开头定义全局通用样式
   在幻灯片最开头的全局样式块中，定义一个用于居中的类（不要加scoped属性，否则样式会被限制在当前幻灯片内）：

   ---
   <style>
     .center-slide {
       display: flex;
       flex-direction: column;
       justify-content: center;
       text-align: center;
     }
   </style>
   ---
   

2. 给目标幻灯片绑定类名
   对需要应用居中效果的幻灯片，在其分隔线后添加class="center-slide"即可，无需重复编写CSS代码：

   ---
   class="center-slide"
   
   # Questions
   ---
   
   ---
   class="center-slide"
   
   ## 另一张需要居中的幻灯片
   ---
   

对之前问题的说明 #

• 你之前使用<style scoped>的方式，因为scoped会将样式作用范围限定在当前幻灯片，所以必须每个幻灯片都复制代码，无法实现复用。
• 关于@apply失效：@apply是Tailwind CSS的专属语法，Marp默认不集成Tailwind，直接使用自然无效。自定义类的方式无需依赖额外工具，更适配Marp的原生工作流。

内容的提问来源于stack exchange，提问作者Yedidya Rashi