ul、li中的DIV垂直居中

当li高度可动态改变时，li中的DIV始终保持垂直居中。

由于高度不固定，不能用margin或者padding解决。

最头疼的是vertical-align: middle;也莫名其妙的失效了。

 

最终想到了相对定位这个办法,简单代码如下：

 

<li class="aaa">
    <div class="bbb">
        <p>DIV里面的内容</p>
    </div>
</li>


.aaa{
  height:100%;
  position: relative;
}

.bbb{
  position: absolute;
  top: 50%;
  margin-top: -22px;
}

 

代码解释：

top: 50%; 作用是利用相对定位实现垂直居中。但是设置之后，元素会稍有偏差。

margin-top: -22px;作用把偏差调整回来，（-22px只是举例子，实际大小按照样式设定）。

 

到这里可能有人会问，为什么不直接在top中调整，而需要另外添加margin-top来调整呢，因为如果top不是50%的话，比如30%，那么随着li的高度变化，DIV实际在li里面的高度就会越接近真正的30%位置。利用margin-top来调整不会出现该现象。如果有什么描述的不对，欢迎评论指出，本人还是程序员小白~