CSS设置文本居中后全屏正常，缩放或移动端显示异常如何解决？

你之前的代码问题在于给段落设置了固定的20em宽度，当屏幕宽度小于20em时，段落宽度不会自动收缩，因此出现适配异常。以下是两种可实现需求的方案，你可以按需选择： #

方案1：媒体查询实现992px以上生效

符合你提到的思路，仅在992px及以上的大屏应用居中固定宽度样式，小屏保持默认流式布局：

p.blocktext {
  /* 小屏样式可保留默认，也可按需自定义边距 */
}

@media (min-width: 992px) {
  p.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 20em;
  }
}

方案2：max-width适配全尺寸（更推荐）

不需要写媒体查询，将固定width替换为max-width即可天然适配所有屏幕尺寸：

p.blocktext {
  margin-left: auto;
  margin-right: auto;
  max-width: 20em;
}

该方案的逻辑是：

• 当父容器/屏幕宽度大于20em时，段落宽度固定为20em且水平居中，满足你桌面端的优化需求
• 当父容器/屏幕宽度小于20em时，段落自动占满可用宽度，不会出现内容溢出、横向滚动的问题，天然适配移动端

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