CSS align div vertikal mit dynamischem Inhalt

Question

Ich habe folgenden Markup:

<div class="content-one yellow" style="min-height: 365px;"> 
    <div class="content-one-inner"> 
     <div class="left"> 
      <div class="img-wrapper"> 
       <img src="" alt="Accenture tshirt"> 
      </div> 
     </div> 
     <div class="right"> 
      <h1 class="desktop"> 
       <span class="lev-1"> 
        <span>CREATE</span> 
        <span>YOUR</span> 
       </span> 
       <span class="lev-2"> 
        <span>UNIQUE</span> 
        <span>TEE</span> 
       </span> 
      </h1> 
      <div class="text-wrapper"> 
       <p> </p> 
       <p></p> 
       <p></p> 
      </div> 
      <a class="next" href=""><span>Build your design</span></a> 
     </div> 
    </div> 
</div> 

content-one hat ein min-height von JS berechnet, wie so die Höhe des Bildschirms erhält:

$(document).ready(function(){ 
    function updateWindowHeight() { 
     var currentHeight = $(window).height(); 
     $('.content-one').css('min-height', currentHeight - 132); 
    } 

    updateWindowHeight(); 

    $(window).on('resize', function(){ 
     updateWindowHeight(); 
    }); 
}); 

I dann eine CSS-Regel wie folgt:

.content-one .content-one-inner { 
    margin: 0 0 0 4px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    width: 90%; 
} 

Dies zentriert die div richtig Howeve r Wenn der Inhalt davon zunimmt oder der Bildschirm eine geringere Höhe hat, wird die .content-one-inner unter der Überschrift Rand Fußzeile ausgeblendet.

Wie kann ich meine CSS schreiben, dass, wenn der Bildschirm kleiner oder der Inhalt größer ist der Div (Content-One) immer noch zentriert, aber versteckt unter Kopf- und Fußzeile?

Answer 1

Als flexbox Evangelist würde ich vorschlagen, flexbox :)

Dann müssen wir Code direkt an den parent so div.content-one hinzuzufügen, die wie diese

.content-one { 
display: flex; 
justify-content: center; 
align-items: center; 
} 

aussehen Hier kommt codePen mit Lösung