如何将指定宽度的段落水平居中于父div容器

当你给段落设置15ch固定宽度后，它从默认的块级元素占满父容器宽度变成了固定宽度，所以会左对齐。要让这个段落整体水平居中在父div里，有几种简单的实现方式：

方法一：给段落设置左右自动外边距 #

块级元素设置margin: 0 auto时，浏览器会自动分配左右外边距，让元素在父容器中水平居中。修改你的CSS如下：

div {
  margin: 0 auto;
  background: yellow;
  /* 这里的text-align:center可以去掉，因为现在是让p块级元素居中，不是文本 */
}

p {
  text-align: center; /* 保持段落内部文本居中 */
  width: 15ch;
  margin: 0 auto; /* 关键：让p本身在父容器居中 */
}

对应的HTML不变：

<div>
  <p>This 1 sentence paragraph should be centered.</p>
</div>

方法二：用Flexbox布局（推荐） #

给父容器开启Flex布局，通过justify-content: center实现子元素水平居中，这种方式更灵活，适合现代布局：

div {
  margin: 0 auto;
  background: yellow;
  display: flex; /* 开启Flex */
  justify-content: center; /* 水平居中子元素 */
}

p {
  text-align: center;
  width: 15ch;
}

方法三：用Grid布局 #

和Flex类似，Grid布局也能快速实现居中：

div {
  margin: 0 auto;
  background: yellow;
  display: grid; /* 开启Grid */
  justify-content: center; /* 水平居中子元素 */
}

p {
  text-align: center;
  width: 15ch;
}

这三种方法都能解决你的问题，其中Flex和Grid更适合复杂的布局场景，而margin:0 auto是传统的块级元素居中方法，按需选择即可。

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