双栏容器需先用max-width+margin:0 auto使其自身居中，再处理子元素对齐；Flex中justify-content作用于整体而非单栏；大屏偏右问题应通过calc(50vw-630px)解耦padding与视口关系。
双栏容器本身没居中，只靠子元素 text-align 无效
很多人给 .left 和 .right 加 text-align: center，发现文字是居中了，但两栏整体还是贴左。根本原因是：双栏布局的父容器（比如 <div class="layout">）默认宽度是 <code>auto（即内容撑开），它没占满行，更谈不上“居中”。必须先让这个父容器在视口里水平居中，子栏才可能对齐。
用 max-width + margin: 0 auto 是最稳的起点
这是兼容性最好、语义最清晰的方式，尤其适合内容宽度有明确上限（如 1260px）的场景：
- 给双栏父容器设
max-width: 1260px，而非width: 1260px，保证小屏下能自适应收缩 - 紧跟着加
margin: 0 auto，触发块级元素水平居中 - 别忘了
box-sizing: border-box，避免 padding/border 撑破最大宽度
示例：
.two-column {
max-width: 1260px;
margin: 0 auto;
box-sizing: border-box;
}Flex 布局下容易忽略 justify-content 的作用对象
如果用 display: flex 实现双栏（比如 .left { flex: 0 0 250px } + .right { flex: 1 }），justify-content: center 不是对子项居中，而是对“所有子项组成的整体”在父容器内居中——这会导致左右栏被一起挤到中间，留出大片空白，不是想要的效果。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
正确做法是：
- 保持父容器
justify-content: flex-start（默认值） - 把居中逻辑交给父容器自身：仍用
max-width + margin: 0 auto - 或者改用
display: grid，配合grid-template-columns: 250px 1fr和外层居中控制
大屏下内容“偏右”？其实是 padding 计算没解耦背景
当页面顶部是全宽背景区块，下方双栏突然看起来“右偏”，大概率是因为你只约束了内容宽度，却没同步处理两侧留白与视口的关系。此时 calc(50vw - 630px) 就派上用场了：
- 给双栏父容器设
padding-left: calc(50vw - 630px)和padding-right: calc(50vw - 630px) - 这样内容区域始终锚定在视口中心线 ±630px 范围内，背景自然全宽，且与上方区块垂直对齐
- 注意：该写法在视口 ≤ 1260px 时 padding 为负，会被浏览器忽略，安全
真正难的不是怎么写，而是想清楚：你要居中的到底是“内容框”，还是“内容+背景”的视觉单元。后者必须把 padding 或 margin 的计算逻辑从固定像素转向视口单位。
