调整三重容器垂直对齐中的文本位置

Question

I used a code that I found on Stack Overflow, to use vertical-align: middle using triple div from the following page: How can I vertically center a div element for all browsers using CSS?

I have 3 texts, 1 h1 and 2 h2 in my page that are all being put in the same container div, looks like the following:

 .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>

In the inserted Snippet, you could see that between Header 1, Header 2-1 and Header 2-2 there are big gaps, and I would like to close these gaps (Between the 2 h2s). I tried a few things but none of them are working and honestly, my brain is neither. I hope anyone could fix this; Im very sorry for the length of this question.

Thank you very much in advance!

Answer 1

You can decrease the gap between 2 h2s by,

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

you defined the class .h2 and make margin zero but that cannot affect inside of the div.