如何设置文本宽度为80%并保持居中（响应式，拒绝像素单位）

你的问题核心是块级元素设置固定宽度后，需要让元素本身在水平方向居中，而你之前尝试的justify-content/align-*等属性之所以无效，是因为这些属性要么是flex/grid容器的控制属性，要么仅在flex/grid布局的子元素中生效，普通块级<p>默认不属于这类场景。

下面给你两个符合要求的实现方案，都不需要使用像素单位，窗口缩放时比例保持一致：

方案1：使用margin: 0 auto（最简方案） #

块级元素的margin-left和margin-right设为auto时，浏览器会自动将剩余水平空间平分给左右margin，从而让元素本身居中。结合你的需求，代码如下：

p {
  width: 80%;
  text-align: center; /* 保持内部文本居中 */
  margin: 0 auto; /* 让p元素整体水平居中 */
}

这个方案不需要额外修改父元素，直接作用于<p>即可，完全符合你拒绝像素单位的要求。

方案2：借助Flex布局 #

如果你的场景适合用Flex布局（比如父元素还有其他子元素需要布局），可以给<p>的父元素添加Flex属性：

/* 父元素样式 */
.parent {
  display: flex;
  justify-content: center; /* 让子元素在水平方向居中 */
}

/* p元素样式 */
p {
  width: 80%;
  text-align: center; /* 保持内部文本居中 */
}

这里justify-content: center是作用在Flex容器（父元素）上的，能直接让子元素<p>整体居中，同样不需要像素单位。

补充说明你之前尝试的属性为什么无效： #

• justify-content/align-content/align-items：这些是Flex/Grid容器的属性，直接给<p>设置不会生效，必须作用于容器元素。
• justify-self/align-self：这些是Grid/Flex子元素的属性，只有当<p>处于Grid或Flex容器中时，这些属性才会起作用，你直接给普通块级<p>设置自然无效。

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