CSS代码(四)：float元素的垂直居中

在前端程序的开发中，经常会遇到将float元素垂直居中的应用场景，并且结合的场景非常之多，如float元素与inline元素、float元素与float元素、float元素与block元素以及它们的综合应用场景，在大部分的情况下，采用的方案有如下三种：
1. 采用flex布局；
2. 综合运用line-height、margin与padding；
3. 综合运用相对定位与绝对定位；

第一种方案，嵌套略显复杂，并且实现起来感觉较重，灵活性稍差；第二种方案在大部分的情况下都简洁高效，但碰到复杂的情况，例如inline元素的自动延伸，可能需要非常繁琐的调试过程，并且扩展性稍差，第三种纯属工作量的问题，对流式布局的自动适应性几乎破环得一干二净(不到万不得已，我一般不会采用此方法)。

今天介绍一种利用table-cell布局的方法，简单高效，并且扩展性较强，尤其是在垂直居中的应用上，几乎是通杀。

首先看看应用场景，在菜单的右侧添加操作按钮与图表，要求与菜单的文字垂直居中对齐，以下是布局代码：

<ul class="list-group" style="font-size : 14px;">
    <li class="list-group-item">
            <a href="javascript:void">人员管理</a>
            <i class="glyphicon glyphicon-tags glyphicon"></i>
    </li>
    <li class="list-group-item">
            <a href="javascript:void">角色管理</a>
            <button class="btn btn-xs btn-primary">添加</button>
    </li>
    <li class="list-group-item">
            <a href="javascript:void">组织机构</a>
            <button class="btn btn-xs btn-primary">添加</button>
    </li>
</ul>

以下是相关元素的样式：

.list-group-item {
    /* 触发BFC, 防止float塌陷*/
    overflow : hidden;      
}
.list-group-item a {
    float : left;
}
.list-group-item .glyphicon, .list-group-item .btn{
    float : right;
}

改进的方法很简单，为菜单项、按钮、图标添加包装元素，并将元素的显示样式设置为“table-cell”，样式如下：

.wrapper {
    display : table-cell;               
    width : 300px;
    height : 30px;
    vertical-align: middle;
}

相关的HTML代码如下：

<li class="list-group-item">
    <!-- 添加包装元素 -->
    <div class="wrapper">
        <a href="javascript:void">组织机构</a>
        <button class="btn btn-xs btn-primary">添加</button>
    </div>
</li>

最后的效果如下所示，左边是未添加包装元素的效果图，右边是包装后的效果。

结论

利用table-cell来排列元素，在垂直居中上处理上效果斐然，但是table-cell布局有个缺点：不能使用相对的宽度与高度(百分比)。