在DIV内垂直居中UL-CenteringVerticallyanULinsideaDIV

i am trying to make a navigation menu inside a 200px x 200px square, this navigation list (UL) changes from square (200px) to square in 2 rows, like a table, it has some transitions and a lot more stuff going on, but i don't think that affects the vertically centering i want to accomplish. (i've seen the other answes for this question, but they don't fit this specific scenario, line-height doesn't work, etc.) these multiple menus are the ones i want to be aligned depending on every element i add, if i just add 1 element then it looks like the center square, of course there is a limit of elements too that can fit on the square, i have a maximum already ( 5 elements ) according to my actual HTML - CSS

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

This is what i want to accomplish

这就是我想要完成的

the html markup is something like this

html标记是这样的

 
                  
  
                      
 
                          
Element 1
  
                              
 
                         
Element 1
Element 2
  
                              
 

I know i am not giving too much info, but i can't really put the code as it is, it's work for a private company, but i hope you understand my scenario, the menu on top of the img it has an RGB alpha transition that makes it appear on top of on :hover, but again, i think the important thing is to align every button vertically like that, withouth recurring to special "fixes" for every different section using "position: relative; top: 30px;" i could do that, but i want to understand and see if i can do it without too much trouble, and adding the elements i want to and get automatically aligned in perfect center.

我知道我没有提供太多的信息，但我不能真正把代码放在原处，它适用于私人公司，但我希望你了解我的情况，img上面的菜单有一个RGB alpha过渡使它出现在on：hover上，但同样，我认为最重要的是将每个按钮垂直对齐，而不是使用“position：relative; top：30px;对于每个不同的部分重复特殊的”修复“ “我可以做到这一点，但我想了解并看看我是否可以毫不费力地做到这一点，并添加我想要的元素并在完美的中心自动对齐。

Thank you so much for your help. (english is not my first language so i hope it is understandable)

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

2 个解决方案

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

  

    

      
Element 1
      
Element 2
      
Element 3
    
  
  

    

      
Element 1
    
  
  

    

      
Element 1
      
Element 2
    
  

  

    
Element 1
    
Element 2
    
Element 3
  

.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;
}

  

    

      
Element 1
      
Element 2
      
Element 3
    
  
  

    

      
Element 1
    
  
  

    

      
Element 1
      
Element 2