Bootstrap 3：center-block搭配max-width后内容偏左问题咨询

嘿，这个问题我碰到过好多次！核心原因其实很简单：当你给文章文本设置max-width:28em后，这个文本块本身变成了宽度小于父容器的块级元素，而块级元素默认是左对齐的——哪怕父容器用了center-block类（一般是通过margin: 0 auto实现容器居中），内层的文本块也不会自动跟着居中。

给你两个靠谱的解决方案，随便选一个都能用：

方案一：给文本块添加自动外边距 #

直接给承载文章文本的元素（比如<article>或者类名为.post-content的元素）加上margin: 0 auto，让它在父容器里水平居中：

.post-content {
  max-width: 28em;
  margin: 0 auto;
  /* 可选：优化阅读体验的额外样式 */
  line-height: 1.7; /* 宽松行高更易读 */
  padding: 0 1rem; /* 小屏幕下避免文本贴边 */
}

这样既限制了文本的最大宽度，又能让整个文本块在center-block的父容器里完美居中，不会偏左。

方案二：调整父容器的宽度逻辑（适合统一控制场景） #

如果你不想给文本元素单独加样式，也可以直接把max-width加到center-block的父容器上，同时保留它的居中属性：

.center-block {
  max-width: 28em;
  margin: 0 auto;
  padding: 0 1rem;
}

这种方式更简洁，适合整个博客内容都需要统一宽度的场景。

另外提醒一句：别用text-align: center来处理段落文本，那会让所有文字都居中对齐，不是我们要的「文本块居中、文字左对齐」的效果哦！

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