html - 顶部 :-50% not working?

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

为什么？我该如何解决？

奇怪，它只适用于 IE7 :)

Answer 1

按百分比移动元素要求包含元素具有高度属性。所以如果你把 height:90px; (我收集到的是正确的，因为该元素高 180 像素，内容器应距离顶部 50%)它应该有效。