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来调整不会出现该现象。如果有什么描述的不对，欢迎评论指出，本人还是程序员小白~

巴特西

ul、li中的DIV垂直居中

最新文章

热门文章