垂直和水平居中在自动高度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%); 
}