如何指定元素宽度并使其在父元素中居中显示？

text-align: center 仅对元素内部的行内内容、行内块级内容生效，无法控制有明确宽度的块级子元素的对齐位置。你写的place-content: center是Flex/Grid布局下的专属属性，父元素没有开启对应布局模式时，这个属性不会产生任何效果，这就是你设置了宽度的p标签始终左偏的原因。

两种方案都能满足需求，不需要复杂改造：

方案1：无需Flex布局，补全基础属性即可 #

块级元素设置明确宽度后，添加左右自动外边距就能实现自身水平居中，再单独给p标签设置文本居中属性即可，原有父元素的text-align: center可以保留，用来控制h1这类元素的居中效果。
修正后的完整CSS代码：

.service-info p {
  padding: 100px 0;
  font-weight: 500;
  color: red;
  width: 50%;
  margin: 0 auto; /* 固定宽度块级元素水平居中 */
  text-align: center; /* 段落内部文本居中 */
}

.service-info {
  text-align: center;
  position: relative;
  width: min(95%, 70rem);
}

方案2：使用Flex布局实现 #

给父元素开启纵向Flex布局，通过交叉轴对齐属性实现所有子元素的水平居中，适配性更强，后续加其他子元素也会自动居中。
修正后的完整CSS代码：

.service-info p {
  padding: 100px 0;
  font-weight: 500;
  color: red;
  width: 50%;
  text-align: center; /* 段落内部文本居中 */
}

.service-info {
  text-align: center;
  position: relative;
  width: min(95%, 70rem);
  display: flex;
  flex-direction: column;
  align-items: center; /* 子元素沿水平方向居中 */
}

两种写法最终效果一致：h1标题居中、p标签保持50%宽度整体居中、p标签内部文本也居中对齐。

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