使用 CSS Grid 布局可优雅解决标题动态居中与左侧/右侧图标不重叠的问题，无需依赖 position: absolute，通过 grid-template-columns: 1fr auto 1fr 分配空间，确保标题始终占据中间弹性区域并自动截断。
使用 css grid 布局可优雅解决标题动态居中与左侧/右侧图标不重叠的问题，无需依赖 `position: absolute`，通过 `grid-template-columns: 1fr auto 1fr` 分配空间，确保标题始终占据中间弹性区域并自动截断。
在移动端或 App 风格的导航栏（AppBar）中，常见需求是：左侧为返回按钮、中间为标题（需严格居中）、右侧为操作项（如搜索、菜单等）。若对返回按钮使用 position: absolute，当标题文本过长时极易发生视觉重叠——尤其在响应式或国际化场景下（如中文长标题），传统 text-align: center + 绝对定位方案会失效。
✅ 推荐方案：CSS Grid 布局
核心思想是将 AppBar 设为三列网格：左列（1fr）容纳返回按钮、中列（auto 或 1fr）承载标题、右列（1fr）放置操作项。这样标题天然获得独立内容区域，不受两侧元素尺寸影响，且自动居中对齐：
appbar {
display: grid;
grid-template-columns: 1fr auto 1fr; /* 左右弹性留白，中间自适应内容 */
align-items: center;
padding: 0 8px;
gap: 4px;
width: 360px; /* 可替换为 100% 或 max-width */
white-space: nowrap;
background-color: #fff;
color: #191919;
}
.title {
font-weight: normal;
font-size: 18px;
text-overflow: ellipsis;
overflow: hidden;
justify-self: center; /* 显式居中（冗余但更可控） */
}? 关键要点说明：
- 1fr auto 1fr 中，auto 列宽度由标题内容决定，两侧 1fr 列均分剩余空间，自然推挤标题至视觉中心；
- 标题元素（如
）无需设置 width 或 position，仅需 overflow: hidden + text-overflow: ellipsis 实现安全截断；
- 左右工具区（.back, .search, .link 等）使用 tool 容器包裹，通过 display: flex 灵活排列，避免手动计算偏移；
- 完全规避 position: absolute —— 消除重叠根源，提升可维护性与无障碍支持。
? 进阶提示：
- 若需支持多行标题，可将 white-space: nowrap 改为 white-space: normal，并配合 line-clamp 控制行数；
- 在窄屏设备上，建议添加媒体查询缩小 padding 或调整 font-size，确保标题可读性；
- 所有图标均采用内联 SVG Base64，避免额外 HTTP 请求，同时保证清晰度与主题色一致性。
此方案已通过多长度标题（含超长中文）、多右侧图标组合等场景验证，布局稳定、语义清晰、兼容性强（支持现代浏览器及 iOS/Android WebView），是构建健壮 AppBar 的首选实践。
立即学习“前端免费学习笔记（深入）”；
