将自动高度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%);
}