Astro中使用Markdown与KaTeX编写LaTeX公式的居中方法

方法1：用CSS精准定位显示公式容器 #

如果你的显示公式被rehype-katex渲染成带katex-display类的元素，直接给这个类加居中样式：

.katex-display {
  text-align: center;
  margin: 1em 0; /* 可选：添加上下边距区分段落 */
}

要是公式放在p标签里，且该p标签仅包含公式内容，用这个选择器避免影响普通段落：

p:has(.katex-display) {
  text-align: center;
}

注：:has选择器需要现代浏览器支持，目前主流浏览器均已兼容。

方法2：用rehype-wrap给公式加专属容器 #

这个方法更稳妥，能确保公式有独立的居中容器，不会和普通段落冲突：

1. 先安装插件：

npm install rehype-wrap

2. 修改astro.config.mjs的markdown配置：

import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import rehypeWrap from 'rehype-wrap';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [
      rehypeKatex,
      [rehypeWrap, {
        selector: 'div.katex-display', // 匹配显示公式的容器
        wrap: '<div class="math-display-center"></div>' // 包裹一个带类的div
      }]
    ]
  }
});

3. 在全局CSS文件中添加样式：

.math-display-center {
  text-align: center;
  margin: 1.5em 0;
}

方法3：针对p标签包裹公式的场景 #

如果你的显示公式被放在p标签里，且无法通过类选择，试试这个CSS：

p > .katex:only-child {
  display: block;
  text-align: center;
}

它只会选中那些仅包含KaTeX公式的p标签，不会影响有普通文本的段落。

内容的提问来源于stack exchange，提问作者Pablo De Napoli