コンテンツの上下の余白を調節したい

前提・実現したいこと

cssのコーデイングにてコンテンツの上下を中央に寄せたいです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>テキスト</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="format-derection" content="telephone=no">

    <meta name="keywords" content="キーワード">
    <meta name="description" content="ディスクリプション">

    
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
    <header class="header">
        <div class="logo">
            <a href="#">
                <img src="#" alt="logo">
            </a>
        </div>

        <h1 class="title">テキスト</h1>
        <headerNav class="headerNav-title">
            <ul class="ul-list">
                <li>ログイン</li>
                <li>会員登録</li>
                <li>お問い合わせ</li>
            </ul>
        </headerNav>
    </header>



    <input type="checkbox" name="navToggle" id="navToggle" class="nav-toggle">
    <label for="navToggle" class="btn-burger"></label>
    <nav class="nav">
        <ul class="nav-list">
            <li>テキスト</li>
            <li><a href="#" title="テキスト">テキスト</a></li>
            <li><a href="#" title="テキスト">テキスト</a></li>
            <li><a href="#" title="テキスト">テキスト</a></li>
            <li><a href="#" title="テキスト">テキスト</a></li>

        </ul>
    </nav>

<script>
        $(function() {
            $('.btn-burger').on('click', function() {
                $('.nav-list').toggleClass('is-active');
            });
        }());

</body>

@charset "utf-8";

.nav-toggle {
    display: none;
}

.nav {}

/*----------------------------
* メニュー開閉ボタン
*----------------------------*/
.btn-burger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    background: url("../img/burger.svg") center center / 35px 28px no-repeat;
}

.nav-toggle:checked ~ .btn-burger {
    background: url("../img/close.svg") center center / 26px 26px no-repeat;
}

.nav-list {
    list-style: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100vw;
    height: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #555;
    margin: 0 auto;

}

.nav-list li {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: 0;
    padding: 0.5em 1em;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    line-height: normal;
    
}

.nav-toggle:checked ~ .nav .nav-list {
    display: block;
}

/*----------------------------
* アニメーション部分
*----------------------------*/

/* アニメーション前のメニューの状態 */
.nav-list {
    transform: translateX(150vw);
    transition: all .3s linear;
}

/* アニメーション後のメニューの状態 */
.nav-list.is-active {
    transform: translateX(0);
}