How to vertically align within 100vh div

I ran into a problem that I've been trying to fix for a few hours, unsuccessfuly. I'll get straight to the problem - I have a header which height is 100vh, inside the header I have content consisting of text and icons.

I have alligned the content horizontally with no problem using text-align: center and display: inline-block. The content is responsive regarding width.

But the problem occurs when I maximize the height. Once it goes beyond certain height (Only because the height of the content is around 500px, *not because vertical alignment works up until that point. That is the base of the problem tho, the content is not vertically aligned).

So, when I maximaze the height, my content stays exactly as it was when the height was smaller, and consequently my content is not centered anymore(It was before but only due it's own height).

I tried everything I found online, but nothing seemed to work. To make it clear, I'm trying to center my content vertically when the height of the parent div maximizes.

I created the div .wrapper-header and tried to center the whole content altogether but failed again.

HTML

 <header>  
            <div class="wrapper-header">
                <div class="wrapper-intro">
                    <h6 class="intro">Hi there,</h6>
                </div>
                <div class="wrapper-intro1">
                    <h5 class="intro1">
                        my name is Jelena and I
                    </h5>
                </div>
                <div class="wrapper-intro2">
                    <h3 class="intro-2">
                        make everything possible on the internet.
                    </h3>
                </div>
                <div class="icons-s">
                    <table class="icons-display">
                        <tr>
                            <td class="icons">
                                <img src="icons/science_48.png" alt="science"> <img src="icons/game-controller_48.png" alt="game-cont"> <img src="icons/spaceship_48.png" alt="spaceship">
                            </td>
                        </tr>
                        <tr>
                            <td class="icons1">
                                <img src="icons/space_48.png" alt="space"> <img src="icons/alien_48.png" alt="rocket"> <img src="icons/robot_48.png" alt="png">
                            </td>
                        </tr>
                        <tr>
                            <td class="icons2">
                                <img src="icons/astronaut_48.png" alt="astronaut"> <img src="icons/javascript_48.png" alt="javascript"> <img src="icons/python_48.png" alt="python"> 
                            </td>
                            <tr>
                                <td class="icons3">
                                    <img src="icons/java_48.png" alt="java"> <img src="icons/data_48.png" alt="data">
                                </td>
                            </tr>
                        </tr>
                    </table>
                </div>
                <div class="quote-wrapper">
                    <p class="quote">
                        Learn from the past, explore the present, <b>and invent the future</b>
                    </p>
                </div>
            </div>
        </header> 

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
}

body,html{
    position: relative;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.grid{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto 300px 300px 230px;
    grid-template-areas:
    "nav"
    "header"
    "author"
    "main"
    "article"
    "section"
    "footer";
}

header{
    height: 100vh;
    grid-area: header;
    background: linear-gradient(to right, #a239ca, #4717f6);
}
.wrapper-header{
}

wrapper-intro{
    text-align: start;
}

.intro{
    margin-left: 5px;
    display: inline-block;
    font-family: 'Source Code Pro', monospace;
    color: #e7dfdd;
    font-size: 20px;
}

.wrapper-intro1{
    text-align: center;
}

.intro1{
    display: inline-block;
    font-family: 'Source Code Pro', monospace;
    color: #e7dfdd;
    font-size: 20px;
}

.wrapper-intro2{
    text-align: center;
}

.intro-2{
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
}

.icons{
    padding-top: 15px;
    padding-bottom: 3px;
}
.icons1{
    padding: 3px;
}

.icons2{
    padding: 3px;
}

.icons3{
    padding: 3px;
}

.icons-s{
    text-align: center;
}

.icons-display{
    display: inline-block;
}

.quote-wrapper{
    text-align: center;
}

.quote{
    font-size: 14px;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    color: #e7dfdd;
    border-top: 1px dashed #e7dfdd;
    width: 70%;
    padding-top: 5px;
    margin-top: 15px;
}