html - 在自动高度 div 内垂直和水平居中自动高度 div

Question

我正在尝试将自动高度内的文本居中 div .与此示例类似，在显示 Skate Gallery 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%);
}