顶部：-50％不工作？

Question

使用此tutorial的示例来为我的网站制作一个独特的CSS，我在code中发现了一个问题：

HTML

<div class="items">
  <div class="outerContainer">
      <div class="innerContainer">
          <div class="element"><a href="#">Finally over four lines, all the code is the same for each list</a></div>
      </div>
  </div>
</div>

CSS

.items .outerContainer
{
    height: 180px;
    width: 200px;
    background-color: #EBEBEB;
    position: relative;    
}

.items .outerContainer .innerContainer
{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    background-color:red;    
}

.items .outerContainer .innerContainer .element
{
    position: relative;
    top: -50%;
}

为什么top: -50%;的{​​{1}}没有将元素“移动”到顶部？如果我写.items .outerContainer .innerContainer .element例如运作良好，但我想要％。

为什么呢？我该如何解决？

奇怪，它仅适用于IE7：）

Answer 1

按百分比移动元素要求包含元素具有height属性。所以如果你把高度：90px; （我收集的是正确的，因为该项目是180px高，内部容器应该从顶部50％）它应该工作。