React.js中设置页面宽度为80%未生效如何解决

你设置的width: 80%语法本身没有问题，出现视觉上宽度未收缩的核心原因有两个：

• 块级元素的百分比宽度是相对于直接父元素计算的，React项目中组件默认挂载在id为root的div节点下，如果html、body、#root这些父级节点存在浏览器默认边距、没有设置宽度基准，会干扰宽度计算
• text-align: center仅能控制元素内部的文本、行内元素的对齐方式，无法控制块级元素本身的位置。仅设置width:80%时，元素会默认靠左排列，20%的剩余空间全部留在右侧，很容易被误以为宽度没有生效

1. 先添加全局样式重置浏览器默认边距，给各级父元素设置宽度基准，把这段代码加到全局CSS文件（如index.css或App.css顶部）即可：

/* 重置所有元素默认内外边距，统一盒模型计算规则 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 给根节点设置宽度基准，保证子元素百分比宽度计算正常 */
html, body, #root {
  width: 100%;
  min-height: 100vh;
}

2. 修改.main-container的样式，添加margin: 0 auto让容器水平居中，80%宽度的效果会直接显现：

.main-container {
  width: 80%;
  margin: 0 auto; /* 左右外边距自动均分剩余20%空间，实现容器水平居中 */
  text-align: center;
}

如果修改后效果仍不符合预期，按F12打开浏览器开发者工具，在元素面板选中main-container节点，查看右侧「计算样式」面板：

• 确认width的最终计算值是否为父容器宽度的80%
• 如果width值不对，面板会标注出覆盖你当前样式的规则来源，直接定位冲突样式修改即可

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