将div内部ul与display：table对齐

Question

我正在尝试将ul li内的main div文本居中对齐。恰好text align center文本。我不想用margin来做。什么是优雅的方式？

  

我需要保持显示台设置为垂直对齐。

我的HTML：

<div class="main-div">
  <div>
    <a class="navbar-brand" href="#">
Anchor
                </a>
  </div>
  <ul>
    <li>
      <span>Center this</span>
    </li>
  </ul>
</div>

CSS：

.main-div {
  width: 100%;
  display: table;
}
ul {
  display: table-cell;
  vertical-align: middle;
}
li {
  list-style: none;
}

CodePen为here