如何使用CSS将导航栏（nav）居中显示？

算力阿峰

2026-7-14

常见有效方案

1. Flex 布局（推荐，现代浏览器兼容）

这是目前最简洁可靠的实现方式，借助Flex布局的对齐属性轻松完成居中：

nav {
  width: 100%; /* 让导航栏容器占满页面宽度 */
}

nav ul {
  display: flex;
  justify-content: center; /* 核心属性：让flex子元素（li）水平居中 */
  list-style: none; /* 移除默认的列表圆点 */
  padding-left: 0; /* 清除浏览器默认的左内边距 */
  gap: 1.2rem; /* 控制菜单项之间的间距，按需调整 */
}

nav ul li a {
  /* 自定义链接样式示例 */
  padding: 0.5rem 1rem;
  text-decoration: none;
}

原理：display: flex 将ul转换为flex容器，justify-content: center 会强制所有子元素在水平方向上居中分布。

2. 行内块（Inline-block）布局（兼容旧浏览器）

如果需要适配IE等老旧浏览器，可采用这种传统方案：

nav {
  width: 100%;
  text-align: center; /* 让内部行内/行内块元素居中 */
}

nav ul {
  display: inline-block; /* 把ul转为行内块，让nav的text-align能作用于它 */
  list-style: none;
  padding-left: 0;
  margin: 0;
}

nav ul li {
  display: inline-block; /* 让菜单项横向排列 */
  margin: 0 1rem; /* 控制菜单项间距 */
}

你之前设置text-align: center无效，大概率是没给ul加display: inline-block——默认ul是块级元素，会占满父容器宽度，此时nav的text-align只能让ul内部元素居中，无法让ul本身在nav里居中。

3. Grid 布局（另一种现代方案）

用Grid布局也能快速实现居中，语法同样简洁：

nav ul {
  display: grid;
  grid-auto-flow: column; /* 让子元素横向排列 */
  justify-content: center; /* 水平居中 */
  list-style: none;
  padding-left: 0;
  gap: 1.2rem;
}