垂直和水平居中在自動高度div內的自動高度div

Question

我試圖居中文本的自動高度div。與此類似例子，在那個說滑板畫廊Here

這部分是我的HTML和CSS

#home-checker-1 { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: #9ccd64; 
 
    position: relative; 
 
} 
 

 
#home-checker-1 img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
#home-checker-1 .checker-box-wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#home-checker-1 .checker-inner { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#home-checker-1 .checker-text-container { 
 
    width: 360px; 
 
    height: auto; 
 
    color: #fff; 
 
    margin: 0 auto; 
 
}

<section id="home-checker-1"> 
 
    <div class="row"> 
 
     <div class="col-md-6 no-padding"> 
 
      <img src="image.jpg"> 
 
     </div> 
 
     <div class="col-md-6 no-padding"> 
 
      <div class="checker-box-wrapper"> 
 
       <div class="checker-inner"> 
 
        <div class="checker-text-container"> 
 
         <h3>Say Something Here</h3> 
 
         <p>Ius fugit tacimates persecuti ei, in wisi errem comprehensam has. Usu in error pericula delicatissimi, 
 
          eu cum homero numquam. Nostrud lobortis no mei, no sed vivendo fabellas. Nam te utinam causae, cu pro 
 
          tempor phaedrum dissentiunt, mei solet possim ei. Rebum evertitur definitiones.</p> 
 
         <a href="#" class="btn btn-primary">Find Job Opportunity</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

我想img採取了<section>水平的50％（我正在使用引導程序網格來實現此.col-md-6）。我希望它保持img縱橫比。所以，屏幕越寬越高，img因此更高，<section>。這將使右側的部分更大。我可以通過使用margin:0 auto;將文本保持居中，但我不知道如何保持文本垂直居中。我無法爲.checker-text-container設置定義的高度，因爲其中的文本數量是動態的，這意味着高度是動態的，並且必須是自動的。

這怎麼辦？

Answer 1

試試這個。

#home-checker-1 .checker-text-container { 
    width: 360px; 
    height: auto; 
    color: #fff; 
    position: absolute; 
    top: 50%; 
    left:50%; 
    transform: translate(-50%,-50%); 
}