如何设置垂直居中的内容？

Question

我创建了一个700px宽度和200px高度的div。在这个div中，一些标签将动态加载最多2行。如果标签在2行中，则对齐看起来很好，但是1行显示底部有很多空格。我需要这个标签是垂直加载中心。

Answer 1

以下是一个例子：

HTML：

<div class="wrapper">
    <ul class="inner">
        <li>c</li>
        <li>c++</li>
        <li>text</li>
        <li>long long long text</li>
        <li>another text</li>
    </ul>
</div>
<div class="wrapper">
    <ul class="inner">
        <li>c++</li>
        <li>text</li>
        <li>another text</li>
        <li>long long long text</li>
        <li>another text</li>
        <li>another text</li>
        <li>another text</li>
        <li>long long long text</li>
        <li>another text</li>
        <li>another text</li>
    </ul>
</div>

CSS：

.wrapper {
    width: 700px;
    height: 200px;
    padding: 0 10px;
    display: table;
    vertical-align: middle;
    background-color: blue;
    margin-bottom: 20px;
}
.inner {
    display: table-cell;
    vertical-align: middle;
}
li {
    float: left;
    color: #000;
    margin: 2px;
    padding: 5px;
    display: inline-block;  
    list-style-type: none;
    border: 1px solid #000;
}

<强> FIDDLE