Jupyter Notebook中HTML表格及文本居中的可行方案问询

嘿，我之前也碰到过这种被自有CSS限制的情况，给你几个亲测有效的简便方案，不用大改全局CSS就能实现表格和文本居中：

1. 用内联HTML样式直接生成表格 #

内联样式的优先级比外部CSS高，直接给表格加margin: 0 auto就能强制居中，适合需要自定义表格内容的场景：

from IPython.display import HTML

# 自定义居中表格，还能顺便美化样式
centered_table = """
<table style="margin: 0 auto; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f2f2f2;">
      <th style="border: 1px solid #ddd; padding: 8px;">姓名</th>
      <th style="border: 1px solid #ddd; padding: 8px;">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">张三</td>
      <td style="border: 1px solid #ddd; padding: 8px;">28</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">李四</td>
      <td style="border: 1px solid #ddd; padding: 8px;">32</td>
    </tr>
  </tbody>
</table>
"""
HTML(centered_table)

2. Pandas DataFrame表格居中 #

如果是用Pandas展示数据，直接用Styler给表格加居中样式就行，还能顺便让单元格内容也居中：

import pandas as pd

df = pd.DataFrame({
    '姓名': ['张三', '李四'],
    '年龄': [28, 32],
    '城市': ['北京', '上海']
})

# 设置表格整体居中，同时让单元格文本居中
styled_df = df.style.set_table_styles(
    [{'selector': 'table', 'props': [('margin', '0 auto')]}]
).set_properties(**{'text-align': 'center'})

styled_df

3. 临时全局修改输出表格样式（魔法命令） #

如果想让当前Notebook里所有输出的表格都自动居中，可以用%%html魔法命令临时注入CSS，要是原有CSS优先级太高，就加!important强制覆盖：

%%html
<style>
/* 针对Jupyter输出区域的表格 */
div.output_area table {
    margin: 0 auto !important;
}
/* 可选：让表格内的文本也统一居中 */
div.output_area table td, div.output_area table th {
    text-align: center !important;
}
</style>

运行一次这个代码块后，后面所有输出的表格都会自动居中，不用每次单独设置。

4. 普通文本居中 #

如果需要让普通文本也居中，同样用HTML模块加内联样式就能实现：

from IPython.display import HTML
HTML('<p style="text-align: center; font-size: 16px;">这是一段居中展示的文本</p>')

这些方法都绕开了修改自有CSS的麻烦，直接从输出端入手，优先级足够覆盖原有样式，你可以根据自己的使用场景选最合适的~

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