html - 如何在高度未知的情况下将一个元素垂直居中放置在另一个元素中？

Question

我正在制作一个响应式网站，所以我使用的大部分元素的高度都是未知的。这是我得到的...

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

CSS:

 .main {
 background: #0e0e0e;
 width: 80%;
 margin: auto;
 position: relative;
 }

 .main .submenu {
 background: #e62e7a;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 15%;
 }

 .submenu ul {
 background: pink;
 float: left;
 height: 100%;
 }

 .submenu ul li {
 display: block;
 float: left;
 }

 .submenu ul li a {
 background: rgba(0,0,0,0.5);
 padding: 8px;
 }

好的。所以我在一个高度和宽度不断变化的div中有一个按比例大小的div。我有两个问题:

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

2) 同样在 anchor 中，填充脱离了它的父边界。文本完美地位于顶部，但 anchor 的填充透明黑色背景正在逃避父级。这是为什么？

附言至于 .main 高度，我在里面添加了一个 padding-top 为 50% 的 div，以相对于它的宽度设置它的高度。

Answer 1

这篇文章可能会有所帮助:http://css-tricks.com/centering-in-the-unknown/

基本上，通过使用 display: table-cell;，您可以在您的内容上使用 vertical-align: middle;。

这是一个更新后的 JSFiddle 以使用此方法:

http://jsfiddle.net/yVn7Z/

更新的 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;
}