將自動高度div垂直居中並水平居中

Question

我正在嘗試將文本居中放置在auto height div 。 與此示例類似，在“在此處溜冰圖庫”部分中

這是我的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％（我正在使用bootstrap網格來實現.col-md-6 ）。 我希望它保持img長寬比。 因此，屏幕越寬， img越寬和越高，因此<section>越高。 這也將使右側的部分也變大。 我可以使用margin:0 auto;保持文本在右側居中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%);
}