CSSは、動的コンテンツ

Question

垂直にDIVを整列私は次のマークアップを有する：

<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のような画面の高さを取得JSによって算出min-heightを有する：

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

    updateWindowHeight(); 

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

I次いでました次のようなCSSルール：

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

これは、 r内容が増えたり、画面の高さが小さければ、.content-one-innerはヘッダーのrandフッターの下に隠れてしまいます。

画面が小さくなったり、コンテンツが増加したりする場合は、div（content-one）はそのまま中央に表示され、ヘッダーとフッターの下には表示されません。

Answer 1

flexbox伝道師として、私はflexbox :)

はその後、我々はここでは、この

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

のようになります。これは、parentのでdiv.content-oneに直接コードを追加する必要がありますことをお勧めしています解決策

と codePen