css导航居中制作

水平居中导航栏

使用 text-align: center 将内联元素或内联块元素居中

.nav {
  text-align: center;
}
.nav-item {
  display: inline-block;
  margin: 0 10px;
}

使用 Flexbox 实现居中布局

.nav {
  display: flex;
  justify-content: center;
}
.nav-item {
  margin: 0 10px;
}

使用 CSS Grid 居中导航项

.nav {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: 20px;
}

垂直居中导航栏

结合 Flexbox 实现垂直居中

.container {
  display: flex;
  align-items: center;
  height: 60px;
}

使用绝对定位和 transform 实现垂直居中

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

完全居中导航栏（水平和垂直）

使用 Flexbox 双向居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

使用 Grid 布局实现完全居中

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

响应式导航栏居中

结合媒体查询调整布局

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 768px) {
  .nav-item {
    flex: 1 0 100%;
    text-align: center;
  }
}

使用 CSS 变量控制间距

:root {
  --nav-gap: 20px;
}
.nav {
  display: flex;
  justify-content: center;
  gap: var(--nav-gap);
}