HTML中使用<center>标签后<ul>项目符号无法居中如何解决？

问题根源是<center>标签仅让元素内容居中，但<ul>默认的list-style-position: outside会把项目符号放在<li>的内容流外部，加上<ul>自带的左侧内边距，就会出现符号左偏、文本居中的错位效果。以下是几种实用修复方案：

方案1：用CSS替代过时的标签（推荐） #

放弃使用已被废弃的<center>，改用text-align: center实现居中，同时调整列表样式让符号与文本同步居中：

<div style="text-align: center;">
  <h2>future projects</h2>
  <div>
    <ul style="list-style-position: inside; padding-left: 0;">
      <li>Weird dreams</li>
    </ul>
  </div>
</div>

• list-style-position: inside：将项目符号纳入<li>的内容流，使其跟随文本对齐
• padding-left: 0：移除<ul>默认的左侧内边距，避免多余空白

方案2：保留标签的修复 #

如果必须保留<center>，只需给<ul>添加相同的样式调整即可：

<center>
  <h2>future projects</h2>
  <div>
    <ul style="list-style-position: inside; padding-left: 0;">
      <li>Weird dreams</li>
    </ul>
  </div>
</center>

方案3：让列表块整体居中（符号保留在外部） #

若希望项目符号仍在文本左侧，但整个列表块居中显示，可通过以下方式实现：

<div style="text-align: center;">
  <h2>future projects</h2>
  <div>
    <ul style="display: table; margin: 0 auto;">
      <li>Weird dreams</li>
    </ul>
  </div>
</div>

• display: table + margin: 0 auto：让<ul>作为块级元素水平居中，符号会随列表块一起处于居中位置的左侧，视觉上整体对齐

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