在显示为表格行的列表中垂直居中内容答案

【问题标题】：Centering content vertically in list which is displayed as table rows在显示为表格行的列表中垂直居中内容
【发布时间】：2016-01-06 14:35:03
【问题描述】：

我正在创建垂直页面导航。我知道确切的高度（300 像素），并且将有 5 个项目（所有项目的大小可能不同，但没有一个项目的高度不会超过 60 像素）。

我想要实现的是在表格行中垂直居中显示所有项目，这里是小提琴：https://jsfiddle.net/6sp5n7xg/。

HTML

<div class="wrapper">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5<br />Item 6</li>
    </ul>
</div>

CSS

.wrapper {
    height: 300px;
    background-color: #EEE;
}

ul {
    display: table;
}

ul li {
    display: table-row;
    height: 60px;
}

水平的它工作正常：https://jsfiddle.net/vq9mt02h/1/，但我也希望它是垂直的。

【问题讨论】：

标签： css vertical-alignment css-tables

【解决方案1】：

Here a working example 从您的代码开始，仅稍作修改。您必须将每个单元格内容包装在span 中并将其设置为display:table-cell;，移动到此选择器的还有关于height 和vertical-align 的属性（我还添加了一个红色边框以突出中间对齐）。所以，这里是修改后的代码：

HTML

<div class="wrapper">
    <ul>
        <li><span>Item 1</span></li>
        <li><span>Item 2</span></li>
        <li><span>Item 3</span></li>
        <li><span>Item 4</span></li>
        <li><span>Item 5<br />Item 6</span></li>
    </ul>
</div>

CSS

ul li {
    display: table-row;
}

ul li span {
    display: table-cell;
    height: 60px;
    border:solid 1px red;
    vertical-align:middle;
}

【讨论】：

【解决方案2】：

为了对一切神圣事物的热爱，不要为此滥用桌子。 Flexbox 是您的救星，无论是菜单布局本身，还是完美的双向居中。考虑以下示例：

.wrapper {
    background-color: #EEE;
}
ul, li {
  margin:0;
  padding:0;
}
ul {
    display: flex;
    flex-direction: column;
}
li {
    display: flex;
    align-items:center;
    justify-content:center;
    height: 60px;
    width:120px;
    border:1px dotted black;  
}

<div class="wrapper">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5<br />Item 6</li>
    </ul>
</div>

将ul 上的flex-direction 更改为row 以具有相同的水平布局。

只需要forget support for IE9，但由于现在已经过去了 3 个主要版本，因此对于大多数网站来说通常认为没问题。

【讨论】：