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

Question

I am trying to center a div inside a table-cell element. I really tried all the previous answers but I simply could not figure it out. Here is the code I am using:

• HTML skeleton:

  <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 style:

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

As I mentioned, I tried everything I found on but nothing did the trick. I would really appreciate your help! Thank you!

Answer 1

Add vertical-align: middle because is a table cell style, if you change the table cell style the trick will be other, but without changing nothing:

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

I add the fiddle link to show this works:

https://jsfiddle.net/qL5sf9uo/