html - 在 DIV 中垂直居中 UL

Question

我正在尝试在 200px x 200px 的正方形内制作一个导航菜单，这个导航列表 (UL)从正方形 (200px) 变为两行正方形，就像一张 table ，它有一些过渡和更多的东西，但我认为这不会影响我想要完成的垂直居中。(我已经看到了这个问题的其他答案，但它们不适合这种特定情况，行高不起作用等。)这些多个菜单是我想要根据我添加的每个元素对齐的菜单，如果我只添加 1 个元素那么它看起来像中心正方形，当然也有一个可以适合正方形的元素限制，我有根据我实际的 HTML - CSS 已经达到最大值(5 个元素)

这就是我想要完成的

html 标记是这样的

<div id="table" align="center" border="0" cellpadding="5" cellspacing="5" style="width 100%"> 
                  <div id="row">  
                      <div> 
                          <div class="nav"><ul><li><a href=link...>Element 1</a></li> <!----- this is the navigation menu that is in top of an image---> 
                              <img alt="" src="image.jpg" style="width: 200px; height: 200px;" /></div> 
                         <div class="nav"><ul><li><a href=link...>Element 1</a></li><li><a href=link...>Element 2</a></li> <!----- this is the navigation menu that is in top of an image---> 
                              <img alt="" src="image.jpg" style="width: 200px; height: 200px;" /></div> 

我知道我没有提供太多信息，但我不能真正按原样放置代码，它是为一家私有(private)公司工作的，但我希望你能理解我的情况，它有 img 顶部的菜单一个 RGB alpha 过渡，使它出现在 :hover 的顶部，但同样，我认为重要的是像那样垂直对齐每个按钮，而不会重复使用“position:relative；顶部”对每个不同部分进行特殊“修复” : 30px;"我可以做到这一点，但我想了解并看看我是否可以毫不费力地做到这一点，并添加我想要的元素并自动对齐到完美的中心。

非常感谢您的帮助。 (英语不是我的第一语言，所以我希望它是可以理解的)

Answer 1

垂直居中的技巧包括两个简单的步骤:

1. 使用 transform: translateY(-50%) 将内容移动到其高度的上半部分。

   

2. 应用 top: 50%。元素必须相对定位才能工作。

   

当然有很多方法可以做到这一点。

body {
  background: #333333;
}
.main-container {
  width: 640px;
  margin: 0 auto;
}
.container {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 250px;
  background: #0077A3;
  margin: 5px;
}
ul {
  position: relative;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
  top: 50%;
}
li {
  text-align: center;
  height: 25px;
  margin: 10px;
}
span {
  background-color: #00C430;
  padding: 5px 10px 5px 10px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

<div class="main-container">
  <div class="container">
    <ul>
      <li><span>Element 1</span></li>
      <li><span>Element 2</span></li>
      <li><span>Element 3</span></li>
    </ul>
  </div>
  <div class="container">
    <ul>
      <li><span>Element 1</span></li>
    </ul>
  </div>
  <div class="container">
    <ul>
      <li><span>Element 1</span></li>
      <li><span>Element 2</span></li>
    </ul>
  </div>
</div>