在DIV内垂直居中UL

Question

我正在尝试在200px x 200px广场内制作导航菜单，此导航列表（UL） 从正方形（200px）到2行的正方形变化，就像一个表，它有一些过渡和更多的东西，但我不认为这会影响我想要完成的垂直居中。 （我已经看到了这个问题的其他答案，但它们不适合这种特定情况，行高不起作用等） 这些多个菜单是我想根据我添加的每个元素对齐的，如果我只添加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> 

我知道我没有给出太多的信息，但我不能真正把代码放在原处，这对于一家私营公司来说很有用，但我希望你理解我的方案，它的img上面的菜单一个RGB alpha过渡，它使它出现在on：hover上，但同样，我认为重要的是将每个按钮垂直对齐，而不是使用“position：relative; top”为每个不同的部分重复特殊的“修复” ：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>

Answer 2

您可以使用Centering in the Unknown方法。

使用HTML

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

要ul垂直居中于.container，请使用

.container:before {
  content: '';
  height: 100%;
}
.container:before, ul {
  display: inline-block;
  vertical-align: middle;
}

body {
  background: #333333;
}
.main-container {
  width: 610px;
  margin: 0 auto;
}
.container {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 200px;
  height: 250px;
  background: #0077A3;
}
.container:before {
  content: '';
  height: 100%;
}
.container:before, ul {
  display: inline-block;
  vertical-align: middle;
}
ul {
  padding: 0;
  list-style: none;
}
li {
  margin: 10px;
  padding: 5px 10px;
  background-color: #00C430;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

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