如何在 100vh div 内垂直对齐

Question

我遇到了一个问题，我已经尝试修复了几个小时，但没有成功。我会直截了当地解决问题 - 我有一个高度为 100vh 的标题，在标题内我有由文本和图标组成的内容。

我使用 text-align: center 和 display: inline-block 将内容水平对齐，没有问题。内容对宽度有响应。

但是当我最大化高度时会出现问题。一旦超过一定高度（仅因为内容的高度约为 500 像素，*不是因为垂直对齐在该点之前有效。这是问题的基础，内容不是垂直的对齐）。

所以，当我最大化高度时，我的内容与高度较小时完全相同，并且 因此我的内容不再居中（以前是但只是由于它自己的高度）。

我尝试了我在网上找到的所有内容，但似乎没有任何效果。为了清楚起见，当父 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;