本文详解如何通过 CSS 的 Flexbox 布局将 Blogger 博客的导航栏水平居中，解决 text-align: center 或 align-items: center 单独使用无效的问题，并提供可直接复用的代码与关键注意事项。
本文详解如何通过 css 的 flexbox 布局将 blogger 博客的导航栏水平居中，解决 `text-align: center` 或 `align-items: center` 单独使用无效的问题，并提供可直接复用的代码与关键注意事项。
在 Blogger 中，默认导航栏（通常由 <nav> 或包含 .menu/.navbar 类的容器包裹）往往左对齐，仅靠 text-align: center 无法生效——因为该属性仅对行内元素或文本内容起作用，而导航菜单项（如 <ul> 和 <li>）默认为块级或列表元素，需借助更现代、可靠的布局方式。
✅ 推荐方案：使用 Flexbox 水平居中容器
核心思路是：将导航栏的直接父容器设为 display: flex，再通过 justify-content: center 实现子元素（即整个导航菜单）的水平居中。
示例代码如下（请根据你的模板实际结构调整选择器）：
/* 假设导航栏父容器类名为 'navbar-container'（常见于 Blogger 主题） */
.navbar-container {
display: flex;
justify-content: center;
}
/* 若导航栏本身是 <nav> 标签且无额外包裹层，可直接选中它 */
nav {
display: flex;
justify-content: center;
width: 100%;
}? 注意事项：
- ✅ 务必作用于导航栏的父容器（而非 <li> 或 <a>），否则可能破坏菜单结构；
- ❌ 避免滥用 align-items: center 单独使用——它控制的是交叉轴（垂直方向）对齐，不解决水平居中问题；
- ⚠️ 若居中后菜单项出现换行或错位，请检查是否设置了过窄的 max-width 或 flex-wrap: wrap；可添加 flex-wrap: nowrap 强制单行；
- ? 在 Blogger 后台 →「主题」→「自定义」→「添加 CSS」中插入上述代码，或在 HTML 编辑器中找到 <b:skin> 标签内插入；
- ? 测试建议：使用浏览器开发者工具（F12）临时添加样式，确认选择器匹配正确后再保存。
? 进阶提示：如需同时实现垂直居中+响应式适配，可在 flex 容器上补充 align-items: center 和媒体查询，例如：
@media (max-width: 768px) {
.navbar-container {
flex-direction: column;
text-align: center;
}
}掌握这一方法，不仅能解决导航栏居中问题，也为后续布局优化打下坚实基础。
