主内容区应在左右边栏间的剩余空间内水平居中，而非全视口居中；推荐用flex布局：父容器设display: flex，左栏flex-shrink: 0+固定宽，主内容区flex: 1自动填满剩余空间。
左右边栏存在时，主内容区怎么水平居中？
主内容区不会自动“感知”左右边栏并居中——它默认从左边界开始渲染。所谓“居中”，本质是让主内容区在左右边栏之间的剩余空间里水平居中，而不是在整个视口里居中。
Flex 布局：父容器设 display: flex，右栏用 flex: 1
这是最推荐、语义清晰且响应式友好的方式。关键不是给主内容加样式，而是控制父容器的布局流。
- 父容器必须设
display: flex，且主轴为水平（默认就是） - 左栏（如导航）设固定宽 +
flex-shrink: 0，防止被压缩 - 主内容区用
flex: 1，它会自动填满剩余空间，视觉上就是“居中”于左右边栏之间 - 如果主内容区内部文字要居中，需额外加
text-align: center；若要整块内容垂直居中，父容器还得加align-items: center - 老版本 Safari 需补
display: -webkit-flex前缀
Grid 布局：用 grid-template-columns 显式划分三列
适合需要精确控制各栏宽度比例、或未来可能扩展为多行多列的场景。主内容区是否“居中”，由你定义的轨道决定。
- 父容器设
display: grid，列模板写成grid-template-columns: 240px 1fr 200px（左栏 240px、主内容占剩余空间、右栏 200px） -
1fr不是像素值，它代表“等分剩余可用空间”，比百分比更可靠，不受内容撑开影响 - 列间间隙统一用
gap，别用margin—— 后者会破坏 Grid 的轨道对齐逻辑 - 如果主内容区需要自身内容居中，对它单独设
justify-self: center或在其内部用text-align: center
绝对定位：仅适用于脱离文档流的浮层类内容
这不是给常规主内容区用的方案。如果你把主内容区设成 position: absolute，它就不再参与 Flex/Grid 流程，容易和边栏重叠或错位。
- 真要用，必须确保父容器有
position: relative - 主内容区设
left: 240px（左栏宽）+right: 200px（右栏宽），再配合margin: 0 auto才能勉强居中，但高度变化时极易失控 - 响应式断点下需反复重写
left/right值，维护成本高 - 绝大多数情况下，这是在给自己埋坑，优先排除
真正容易被忽略的是：左右边栏的宽度是否固定？如果边栏本身也响应式缩放（比如用 minmax(200px, 25%)），那主内容区的“居中感”就会浮动——此时靠 flex: 1 或 1fr 才能保持逻辑稳定，硬写死 margin-left 会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
