html - 顶部：-50% 不工作？

Question

使用本教程中的示例为我的网站制作独特的 CSS 时，我在代码中发现了一个问题：

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%;不.items .outerContainer .innerContainer .element将元素“移动”到顶部？例如，如果我写得top: -20px很好，但我想要 %.

为什么？我该如何解决？

奇怪，它只适用于 IE7 :)

Answer 1

按百分比移动元素需要包含元素具有高度属性。所以如果你把 height:90px; （我认为这是正确的，因为该项目高 180 像素，内部容器应距顶部 50%）它应该可以工作。