如何实现含均匀分布按钮的导航栏页面垂直居中？

要同时实现导航栏整体垂直居中、按钮水平均匀分布，核心是区分导航栏的整体居中和按钮的内部分布两个层次，两者并不冲突，之前的问题出在没有给导航栏的父容器设置正确的布局条件。

方法一：Flex布局（推荐） #

通过给页面根容器（body）设置全屏高度和Flex布局，让导航栏在页面垂直方向居中；按钮的均匀分布则由导航栏内部的ul保持justify-content: space-evenly来实现。

修改后的完整代码：

/* 让body占满视口高度，并设置Flex布局实现子元素垂直居中 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center; /* 垂直居中核心属性 */
}

.buttons {
  width: 100%; /* 让导航栏铺满页面宽度，保证按钮均匀分布 */
}

.buttons ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: space-evenly; /* 按钮水平均匀分布 */
  align-items: center; /* 让按钮在导航栏内垂直对齐 */
}

.buttons li {
  padding: 0; /* 移除多余的padding-top，避免按钮偏移 */
}

.buttons img {
  display: block;
  width: 40px;
  height: 40px;
}

<div class="buttons">
  <ul>
    <li><a href="#button"><img src="https://placehold.co/40x40?text=1"></a></li>
    <li><a href="#button2"><img src="https://placehold.co/40x40?text=2"></a></li>
    <li><a href="#button3"><img src="https://placehold.co/40x40?text=3"></a></li> <!-- 修正了href的语法错误 -->
    <li><a href="#button4"><img src="https://placehold.co/40x40?text=4"></a></li>
    <li><a href="#button5"><img src="https://placehold.co/40x40?text=5"></a></li>
    <li><a href="#button6"><img src="https://placehold.co/40x40?text=6"></a></li>
    <li><a href="#button7"><img src="https://placehold.co/40x40?text=7"></a></li>
    <li><a href="#button8"><img src="https://placehold.co/40x40?text=8"></a></li>
  </ul>
</div>

方法二：绝对定位方案 #

如果不想使用Flex布局，也可以通过绝对定位实现垂直居中：

body {
  margin: 0;
  min-height: 100vh;
  position: relative; /* 为绝对定位的子元素提供参考 */
}

.buttons {
  position: absolute;
  top: 50%; /* 先让导航栏顶部对齐页面垂直中点 */
  left: 0;
  transform: translateY(-50%); /* 向上偏移自身高度的一半，实现精准居中 */
  width: 100%;
}

/* 其余ul、li、img的样式和方法一一致 */
.buttons ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: space-evenly;
  align-items: center;
}

.buttons li {
  padding: 0;
}

.buttons img {
  display: block;
  width: 40px;
  height: 40px;
}

关键修改点说明 #

1. 父容器高度：必须给body设置min-height: 100vh，否则页面高度仅由内容撑开，无法实现全屏垂直居中。
2. 避免布局冲突：导航栏的整体居中由父容器的Flex/绝对定位控制，按钮的均匀分布由内部ul的justify-content: space-evenly控制，两者互不干扰。
3. 修正语法错误：原HTML中第三个<a>标签的href缺少等号，会导致跳转失效，已修复。

内容的提问来源于stack exchange，提问作者waterfoul