Will display: table work if the container is set in vh not pixels or percent

Question

I've got a slider which is always

.main-slider { position: relative; z-index: 10; height: calc(100vh - 165px); margin: 0 0 60px 0; }

.main-slider .item { height: calc(100vh - 165px); width: 100%; background-position: top; background-repeat: no-repeat; background-size: cover !important}

I am trying to set up a simple set up semantic divs to hold a button and display vertical align middle.

<div class="something-semantic">
   <div class="something-else-semantic">
   Unknown stuff to be centered.
   </div>
</div>

.something-semantic {
  display: table;
  width: 100%;
}
.something-else-semantic {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

I am experiencing just the text centering middle, but not the vertical align center.

Any suggestions?

If you prefer to use your developer tools, you can find the site at http://9-web-studio.myshopify.com/ and use password 'alan' to see the shop.

Any and all help would be appreciated.

Answer 1

Yes this will work, the problem is the first div was missing a height of 100%