设置max-width与word-wrap:break-word后文本无法居中的解决办法

问题出在你只设置了文本在段落内部的居中，但段落这个块级元素本身在父容器里还是左对齐的，所以看起来整体文本偏左。

只需要给.para类添加margin: 0 auto;属性，让段落自身在父容器中水平居中，结合原本的text-align: center，就能实现你想要的效果：

修改后的CSS代码：

.para {
  text-align: center;
  max-width: 500px;
  word-wrap: break-word;
  margin: 0 auto; /* 新增这行，让段落自身水平居中 */
}

简单解释：margin: 0 auto会让块级元素的左右外边距自动适配父容器宽度，从而将元素定位在父容器的水平中间位置，再配合text-align: center让段落内的文本在自身盒子里居中，就完美解决了文本看起来左对齐的问题。

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