停用Bootstrap：替换text-center类为原生text-align:center是否有差异？

直接说结论：在你给出的特定代码场景下，页面视觉表现几乎完全一致，但从灵活性、优先级和作用范围等角度，两者存在几个值得注意的细微差异：

1. 作用范围与通用性 #

• Bootstrap的.text-center是一个通用工具类，可以直接作用于任何块级元素（比如<div>、<h1>、设置为块级的<span>等），不管它在DOM结构的哪个位置。只要给元素加上这个类，就能实现文本居中。
• 你的原生CSS写法header p { text-align: center; }是后代选择器，仅对<header>标签下的<p>元素生效。如果后续需要把这个<p>移到<header>外面，或者给其他元素加居中效果，就得修改CSS选择器，远不如Bootstrap工具类灵活。

2. 样式优先级冲突 #

• Bootstrap的.text-center是类选择器，优先级权重为10；而你的原生写法是两个元素选择器组合，权重仅为2。这意味着：
  • 如果页面中还有其他针对这个<p>的类样式（比如<p class="other-class">），.other-class的样式会直接覆盖原生的header p规则；但如果是和.text-center共存，两者属于同优先级，谁写在CSS文件的后面谁生效。
  • 要是你后续给<p>加了内联样式（比如<p style="text-align: left">），不管是Bootstrap类还是原生CSS都会被覆盖，但原生写法的优先级更低，更容易被其他样式冲掉。

3. 响应式扩展能力 #

• Bootstrap默认的.text-center是全局生效的，但它提供了响应式变体（比如.text-sm-center、.text-md-center），可以轻松实现“仅在中等屏幕及以上才居中”这类需求，不用自己写媒体查询。
• 原生CSS要实现同样的响应式效果，得手动添加媒体查询代码，比如：

  @media (min-width: 768px) {
    header p {
      text-align: center;
    }
  }
  

  相比Bootstrap的工具类，工作量更大，也不够直观。

4. 核心样式的一致性 #

• 其实Bootstrap的.text-center源码就是一行纯CSS：text-align: center;（最新Bootstrap 5版本没有加!important）。所以单看文本居中这个属性，两者的CSS属性是完全一样的，视觉上没有区别。

总结一下：如果只是给当前这个<header>下的<p>做居中，两种写法的视觉效果完全相同。但如果考虑到未来的扩展性、响应式需求或者多元素复用，Bootstrap的工具类会更高效；而原生写法更适合针对特定DOM结构做精准样式控制，避免全局类的潜在冲突。

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