調整三重容器垂直對齊中的文本位置

Question

我使用了在 Stack Overflow 上找到的代碼來使用vertical-align: middle使用來自以下頁面的三重div ： How can I vertically center a div element for all browsers using CSS?

我的頁面中有 3 個文本，1 個 h1 和 2 個 h2，它們都放在同一個容器 div 中，如下所示：

 .texts{ -webkit-text-stroke: 1px white; font-family: sans-serif; text-align: center; margin-left: auto; margin-right: auto; } #h1landing{ font-size: 4em; animation: fading 3s forwards; }.outertexts{ display: table; position: fixed; top: 0; left: 0; height: 100%; width: 100%; }.innertexts{ display: table-cell; vertical-align: middle; } #h2{ animation: introThis 6s forwards; font-size: 2em; } #h2v2{ font-size: 2em; animation: introAwaits 9s forwards; }.h2{ margin-top: 0px; } @keyframes introThis{ 0% {opacity: 0%;} 50% {opacity: 0%;} 65%{opacity: 100%; transform: translateY(0px)} 70%{animation-delay: 5s; transform: translateY(0px)} 100%{transform: translateY(-150px)} } @keyframes introAwaits{ 0% {animation-delay: 5s; opacity: 0%;} 60% {opacity: 0%} 75%{opacity: 100%; transform: translateY(0px)} 80%{animation-delay: 5s; transform: translateY(0px)} 100%{transform: translateY(-100px)} } @keyframes fading{ 0% {opacity: 0%; transform: translateX(80%);} 50% {opacity: 100%; transform: translateX(0);} 75% {transform: translateY(0px); animation-delay: 10s} 100% {transform: translateY(-200px)} }

 <div class="outertexts"> <div class="innertexts"> <div class="texts"> <h1 id="h1landing"> Header 1 </h1> <div class="h2"> <h2 id="h2"> Header 2-1 </h2> <h2 id="h2v2"> Header 2-2 </h2> </div> </div> </div>

在插入的代碼段中，您可以看到標題 1、標題 2-1 和標題 2-2 之間存在很大差距，我想縮小這些差距（在 2 h2s 之間）。 我嘗試了一些東西，但都沒有用，老實說，我的大腦都沒有用。 我希望有人能解決這個問題； 對於這個問題的長度，我感到非常抱歉。

非常感謝您！

Answer 1

你可以減少 2 h2s 之間的差距，

h2 {
   margin-top: 0;
   margin-bottom: 0;
}

您定義了類.h2並使邊距為零，但這不會影響 div 的內部。