Html 当两个元素都具有未知高度时，如何将一个元素垂直居中于另一个元素内部？

我正在制作一个反应灵敏的网站，所以我所使用的大多数元素都有未知的高度。这是我得到的

 <div class="main">
   <div class="submenu">
     <ul>
       <li><a href="#">Lorem</a></li>
       <li><a href="#">Lorem</a></li>
       <li><a href="#">Lorem</a></li>
       <li><a href="#">Lorem</a></li>
     </ul>
   </div>
 </div>

好的。所以我有一个比例大小的div，在一个高度和宽度都在变化的div中。我有两个问题：

1） 如何在.div子菜单内的代码末尾垂直居中定位点？显然，百分比行高不起作用，我也不知道为什么，但表格显示技巧也不起作用

2） 此外，在锚定中，填充将脱离其父边界。文本完全位于顶部，但锚点透明的黑色背景填充正在脱离父对象。为什么呢

---

另外，关于主高度，我在里面添加了一个50%填充顶部的div，以设置其相对宽度的高度。

本文可能有助于：

基本上，通过使用

显示：表格单元格

，可以使用

垂直对齐：中间在您的内容上

以下是更新后的JSFIDLE，以使用此方法：


更新的CSS：

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    display: table;
}
.main {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.main .submenu {
    background: pink;
    margin: 0 auto;
    display: table;
}
.submenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.submenu ul li {
    display: table-cell;
}
.submenu ul li a {
    background: rgba(0, 0, 0, 0.5);
    padding: 8px;
    display: block;
}

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    display: table;
}
.main {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.main .submenu {
    background: pink;
    margin: 0 auto;
    display: table;
}
.submenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.submenu ul li {
    display: table-cell;
}
.submenu ul li a {
    background: rgba(0, 0, 0, 0.5);
    padding: 8px;
    display: block;
}