Center an element vertically inside an already vertically centered element - html

Question

I am trying to center my .get-started-btn vertically within a bootstrap column. I believe that the problem may be because this button is already placed inside a div with display: table-cell so i cannot create a table-cell within another table-cell? Is there another way to center the button vertically?
See my fiddle:
JS Fiddle
<div class="page-wrap">
<main>
<div class="jumbotron" id="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1 class="page-header">Flash <span class="page-header-label">Cards</span></h1>
<p class="lead intro-text">
Flash Cards is a simple solution for anyone trying to memorize new things or study for that next big test.
Create your own personal deck of flash cards in minutes and we will track your results to ensure that
you know your stuff.
</p>
</div>
<div class="col-md-4">
<div class="vcenter">
Get Started
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end jumbotron -->
</main>
</div>
CSS
.page-wrap {
width: 100vw;
height: 100vh;
}
main {
display: table;
width: 100%;
height: 100%;
}
#jumbotron {
display: table-cell;
vertical-align: middle;
float: none;
}
.vcenter {
display: table;
height: 100%; /* does nothing */
width: 100%; /*pushes element to new line */
text-align: center;
}
.vcenter a {
display: table-cell;
vertical-align: middle;
float: none;
}

Answer 1

Apologies for misunderstanding your question. Once I increased the width, I saw the two columns.
You can vertically center the button by adding these styles:
.row {
display: table-cell;
}
.vcenter a {
position: relative;
top: 50%;
transform: translateY(-50%);}
}
Fiddle

Answer 2

Does div with paragraph will always have the same content? If yes then you could try:
.vcenter {
line-height: 270px; /*height of entire div on the left*/
}
And remove this:
.vcenter a {
display: table-cell;
vertical-align: middle;
float: none;
}