将 div 在 display: table-cell 元素内垂直居中？

Question

我试图将 div 置于 table-cell 元素的中心。我真的尝试了所有以前的答案，但我就是想不通。这是我使用的代码：

HTML骨架：

<div class="selection">
    <div class="selection_empty">
        <p>No selection.</p>
        <p>Click the button below to start the process.</p>
        <span class="selection_icon ico_add_medium"></span>
    </div>
</div>

CSS 风格：

.selection {
display: table-cell;
width: 50%;
padding: 0 10px 0 10px;
}

正如我提到的，我尝试了我发现的所有方法，但没有任何效果。我将衷心感谢您的帮助！谢谢！

Answer 1

添加 vertical-align: middle 因为是 table 单元格样式，如果您更改 table 单元格样式，技巧将是其他的，但不改变任何内容：

.selection {
  display: table-cell;  
  width: 50%;
  padding: 0 10px 0 10px;
  vertical-align: middle;
}

我添加 fiddle link 来展示这个作品：

https://jsfiddle.net/qL5sf9uo/

将 div 在 display: table-cell 元素内垂直居中？

Vertically center a div inside a display: table-cell element?

css

center