html - CSS 在中间垂直对齐文本/按钮

Question

我试图在中间垂直对齐我的文本/按钮。但是，我使用了 vertical-align: middle; 并且我用 div 嵌套了所有文本/按钮，但我不知道为什么它不起作用。

我已经查看了 this 的答案在堆栈论坛上发帖，我按照答案进行操作，但仍然无法做到。

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

在给出的示例中，您需要将display: table-cell 添加到.text-vertical-center。