Centering Vertically an UL inside a DIV - html

Question

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
This is what i want to accomplish
the html markup is something like this
<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>
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.
Thank you so much for your help.
(english is not my first language so i hope it is understandable)

Answer 1

The trick for centering something vertically includes two simple steps:
Move the content to its top half of its height using transform: translateY(-50%).
Apply top: 50%. The element must be positioned relatively for this to work.
There are ofcourse many ways to do this.
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

You can use the Centering in the Unknown approach.
Use HTML like
<div class="container">
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
To center ul vertically inside .container, use
.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>