Vertical align link text in a percentage height list

Question

I want to align the link text vertically in the <li> list. I tried several ways, but couldn't find the solution. I must keep the percentage height.

A sample version of my code: https://jsfiddle.net/kr0mf4oe/3/

div#html {
  height: 500px;
}
div#main {
  display: block;
  height: 100%;
  background-color: blue;
}
ul#list {
  height: 100%;
  background-color: green;
}
ul#list>li {
  height: 20%;
  border-width: 2px;
  border-bottom: 2px white solid;
}
li>a {
  height: 100%;
  display: block;
  text-align: center;
}

<div id="html">
  <div id="main">
    <ul id="list">
      <li class="leaf1">
        <a href="http://stackoverflow.com">text1</a>
      </li>
      <li class="leaf2">
        <a href="http://stackoverflow.com">text2</a>
      </li>
      <li class="leaf3">
        <a href="http://stackoverflow.com">text3</a>
      </li>
      <li class="leaf4">
        <a href="http://stackoverflow.com">text4</a>
      </li>
      <li class="leaf5">
        <a href="http://stackoverflow.com">text5</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

You can use CSS table + table-cell. As table-cell has the vertical-align feature.

ul#list>li {
  display: table;
  width: 100%;
}
ul#list>li>a {
  display: table-cell;
  vertical-align: middle;
}

div#html {
  height: 500px;
}
div#main {
  display: block;
  height: 100%;
  background-color: blue;
}
ul#list {
  height: 100%;
  background-color: green;
  list-style: none; /*added*/
  padding-left: 0; /*added*/
}
ul#list>li {
  height: 20%;
  border-width: 2px;
  border-bottom: 2px white solid;
  display: table; /*added*/
  width: 100%; /*added*/
}
ul#list>li>a {
  height: 100%;
  text-align: center;
  display: table-cell; /*added*/
  vertical-align: middle; /*added*/
}

<div id="html">
  <div id="main">
    <ul id="list">
      <li class="leaf1">
        <a href="http://stackoverflow.com">text1</a>
      </li>
      <li class="leaf2">
        <a href="http://stackoverflow.com">text2</a>
      </li>
      <li class="leaf3">
        <a href="http://stackoverflow.com">text3</a>
      </li>
      <li class="leaf4">
        <a href="http://stackoverflow.com">text4</a>
      </li>
      <li class="leaf5">
        <a href="http://stackoverflow.com">text5</a>
      </li>
    </ul>
  </div>
</div>

You can also use the CSS3 flexbox, with justify-content:center for center horizontally, and align-items:center for center vertically.

ul#list>li>a {
  display: flex;
  justify-content: center;
  align-items: center;
}

div#html {
  height: 500px;
}
div#main {
  display: block;
  height: 100%;
  background-color: blue;
}
ul#list {
  height: 100%;
  background-color: green;
  list-style: none; /*added*/
  padding-left: 0; /*added*/
}
ul#list>li {
  height: 20%;
  border-width: 2px;
  border-bottom: 2px white solid;
}
ul#list>li>a {
  height: 100%;
  display: flex; /*added*/
  justify-content: center; /*added*/
  align-items: center; /*added*/
}

<div id="html">
  <div id="main">
    <ul id="list">
      <li class="leaf1">
        <a href="http://stackoverflow.com">text1</a>
      </li>
      <li class="leaf2">
        <a href="http://stackoverflow.com">text2</a>
      </li>
      <li class="leaf3">
        <a href="http://stackoverflow.com">text3</a>
      </li>
      <li class="leaf4">
        <a href="http://stackoverflow.com">text4</a>
      </li>
      <li class="leaf5">
        <a href="http://stackoverflow.com">text5</a>
      </li>
    </ul>
  </div>
</div>