垂直和水平对齐包含h1标签和p标签的div

Question

我尝试水平和垂直对齐我的横幅文字，如下所示：

我一直在寻找最好的方法，并且发现它非常困难。这可能是一件非常容易的事情，我错过了几个小时就浪费了但是我想这就是学习！

这是我的HTML

<header class="fullscreen" style="background-image: url('images/bg.png');">
        <div class="logo-wrapper text-center">
            <img id="logo" src="" alt="The South-West Skateboarding (SWSB) logo." />
        </div>
        <nav id="primary" class="text-center">
            <a href="/">HOME</a> |
            <a href="/about">ABOUT</a> |
            <a href="/team">TEAM</a> |
            <a href="/gallery">GALLERY</a> |
            <a href="/forum">FORUM</a> |
            <a href="/login">LOGIN</a>
        </nav>
        <div id="banner" >
            <h1>SOUTH-WEST SKATEBOARDING</h1>
            <p>EST. 2016</p>
        </div>
    </header>

和css（对不起，在sass中，不应该有很大的不同）

header {

    padding: 50px 0 50px 0;
    height: 100%;

    .logo-wrapper {
        margin: 0 auto;
        width: 100%;

        img#logo {
                width: 140px;
                height: 85px;
        }
    }


    nav#primary {
        margin-top: 25px;

        a {
            color: $nav-link-color;
            font-weight: 100;
            letter-spacing: 2.15px;
            text-decoration: none;
            text-transform: uppercase;
        }
    }

    #banner {
        h1 {
            margin-bottom: 0;
        }

        p {
            margin: 0;
        }
    }

Answer 1

以下是demo

#banner {
    width: 100%;
    height: 400px;
    background-color: yellow;
    display: flex;
    align-items: center;
    justify-content: center
}