CSS vertically align text / buttons in the middle

Question

I'm trying to vertically align my text/buttons in the middle. However, I have used vertical-align: middle; and I have nested all the text/buttons with the div and I have no idea why it's not working.

I have checked out the answer to this post on the stack forums and I followed the answer and still couldn't manage to do it.

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Helvetica;
}

.text-vertical-center {
    text-align: center;
    vertical-align: middle;
    color: green;
}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    font-weight: 700;
    color: green;
}

/* Custom Button Styles */

.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

hr.small {
    max-width: 100px;
}

/* Side Menu */


.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header id="top" class="header">
        <div class="text-vertical-center">
            <h1 =class"main1">Start Bootstrap</h1>
            <h3 =class"main2">Free Bootstrap Themes &amp; Templates</h3>
            <br>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
        </div>
    </header>

Answer 1

In the example given, you need to add display: table-cell to .text-vertical-center.