如何将div垂直放置在页面中央？

Question

我是 html 新手，我正在为自己设置一个小网页。我正在尝试制作一个简单的页面，它只是一个 gif 导航栏作为按钮，每个按钮都会指向一个新页面。我有导航栏，它们可以链接到新页面，但我希望这个导航栏位于屏幕中央。

我可以找到一种方法来做到这一点，并且已经阅读了这里关于如何操作的其他答案，但我遇到的问题是我希望每个按钮均匀分布。当我尝试将按钮居中时，它们会挤压在一起，忽略了我设置的均匀空间。

我已经尝试了几种方法来使这项工作无济于事，而且我不太确定为什么这些方法也不起作用。我的尝试包括：

margin: auto;

这没有任何作用，没有发生任何变化。我也尝试过

margin: 0;

，只是为了好玩，

margin: 0 auto;

，但都不起作用。

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

这会将导航栏启动到页面的最顶部或最底部，或者不执行任何操作。我也对这些值进行了一些调整，但这些结果没有改变。

display: flex;

align-items: center;

justify-content: center;

这会覆盖（见下文）

justify-content: space-evenly

并将每个按钮压在一起，而且只是......不起作用。

这是我在 mspaint 中绘制的粗略图像，以进一步解释我的目的：

所以，我希望 div （写在下面）成为一个均匀分布的水平导航栏，并放置在页面的中心。有什么想法吗？

这是基本代码，没有我尝试过的任何解决方案，以便更好地了解它。

.buttons {
  height: 40px;
  width: 100%;
}

.buttons ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

.buttons li {
  padding-top: 10px;
}

<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>
    <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>

Answer 1

我必须将它包裹在一个可以给出高度的容器中，并确保子 UL 是 100% 宽，以便空间均匀地工作

.buttons {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* Center the .buttons  vertically */
}

.buttons ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
  width: 100%; /* ul is the full width of parent container */
}

.buttons li {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the LI content */
}

<div style="height: 300px; border: 1px solid black;">
  <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>
      <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>
</div>