如何在 100vh div 內垂直對齊

Question

我遇到了一個問題，我已經嘗試修復了幾個小時，但沒有成功。 我會直截了當地解決問題 - 我有一個高度為 100vh 的 header，在 header 內部，我的內容由文本和圖標組成。

我使用 text-align: center 和 display: inline-block 將內容水平對齊，沒有問題。 內容對寬度有響應。

但是當我最大化 height 時會出現問題。 一旦超過一定高度（僅因為內容的高度約為 500 像素，*不是因為垂直 alignment 直到該點為止。這是問題的基礎，但內容未垂直對齊）。

因此，當我最大化高度時，我的內容與高度較小時的內容完全相同，因此我的內容不再居中（以前是但只是由於它自己的高度）。

我嘗試了我在網上找到的所有內容，但似乎沒有任何效果。 為了清楚起見，當父 div 的高度最大化時，我試圖將我的內容垂直居中。

我創建了 div.wrapper-header 並嘗試將整個內容完全居中，但又失敗了。

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;
}

Answer 1

我一直在調整我的代碼，發現 flexbox 確實有效。

這段代碼幫助我將我的內容居中，無論父 div 的高度是：

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;