最直接横向导航栏居中用 display: flex + justify-content: center；gap 替代 margin 实现项间空隙；三区布局推荐 flex 或 grid；小屏需 flex-wrap + 合理 justify-content 防溢出。
用 display: flex + justify-content: center 最直接
横向导航栏居中，本质是让一排 <a></a> 或 <li> 在容器内水平居中。现代浏览器下，display: flex 是最稳的选择，不用计算宽度、不依赖浮动、不触发父容器塌陷。
关键点就两条：nav 容器设 display: flex，再加 justify-content: center；子项（如 a）保持默认 flex-shrink: 1 即可自动分配空间，无需设 width 或 float。
常见错误：
- 给每个
a加margin: 0 auto——无效，行内元素不响应auto水平 margin - 对
ul设text-align: center后忘记把li改成inline-block——会留白、换行错位 - 用
position: absolute+left: 50%+transform: translateX(-50%)——脱离文档流，响应式时易偏移，且无法自然折行
gap 比 margin-right 更干净
导航项之间留空隙，用 gap 是首选。它作用于整个 flex 容器，不会在首尾多出额外空白，也避免了“最后一个要不要清 margin”的纠结。
立即学习“前端免费学习笔记（深入）”；
示例：
.main-nav {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.main-nav a {
text-decoration: none;
padding: 0.5rem 1rem;
}
如果必须兼容 IE11（已基本淘汰），gap 不可用，就得退回到 margin-right，并用 :last-child 清除末项右距：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.main-nav a {
margin-right: 1.5rem;
}
.main-nav a:last-child {
margin-right: 0;
}
三区布局（左 logo / 中菜单 / 右功能）别硬套 text-align
当需要「Logo 左对齐、菜单居中、登录按钮右对齐」，不能靠 text-align 混搭或多个 float，结构语义和布局逻辑会混乱。
推荐方案是：外层用 display: flex，内部三个区域用 flex: 1 分配空间，再配合 justify-content 精确控制每区内容对齐方式：
- 左侧区域：
justify-content: flex-start - 中间区域：
justify-content: center - 右侧区域：
justify-content: flex-end
或者更简洁地用 CSS Grid 划三列：grid-template-columns: 1fr max-content 1fr，把菜单塞进中间列，天然居中，且不干扰左右内容流。
小屏折行时 flex-wrap: wrap 必须配 justify-content 调整
移动端屏幕窄，flex 导航默认会溢出或横向滚动。加 flex-wrap: wrap 让它换行，但此时 justify-content: center 会让每行单独居中，导致第二行项左右不对齐。
解决办法：
- 改用
justify-content: space-around或space-between，使换行后各项目间距更均衡 - 配合
row-gap控制行间距，避免上下贴太紧 - 媒体查询里缩小
padding和font-size，防止文字撑爆容器
容易被忽略的一点：别在 nav 上写 white-space: nowrap 强制不换行——这会让小屏用户被迫横向滚动，破坏可访问性。折行是正常行为，应主动适配，而非压制。
