在显示中垂直居中div：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因为是一个表格单元格样式，如果更改表单元格样式，则该技巧将是另一种，但不会改变任何内容：

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

我添加小提琴链接以显示此作品：

https://jsfiddle.net/qL5sf9uo/