在两个并排 50% 宽度的列中水平和垂直居中 2 个 div

Question

让 2 个 div 在其各自父级内水平和垂直居中时遇到一些问题，这些父级以 50% 的宽度和 100% 的高度并排排列。

这是我得到的（为了方便使用 Codepen）。

*** HTML ***
<div class="parent">
  <div class="left">
    <div class="info">
      <h1>This div should be centered <br>within the left 50%</h1>
      <h2>Get in touch:</h2>
      <h1>
        +44 (0)1323 567 891<br>
        +44 (0)1323 132 363<br>
        info@somecompany.co.uk<br>
      </h1>
    </div>
  </div>

  <div class="right">
    <div class="img-wrapper">
      <img src="http://placehold.it/210x210/FE5000/FFF"/>
    </div>
  </div>
</div

*** CSS ***
.parent {
  height: 100%;
  width: 100%;
}

.parent:before, .parent:after {
  display: table;
  content: " ";
 }

.parent:after {
  clear: both;
}

.left, .right {
  float: left;
  height: 100%;
  width: 50%;
}

.info {
  width: 400px;
  height: 280px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.right .img-wrapper {
  width: 210px;
  height: 210px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}

Answer 1

我试过了。我不确定这是否是您要找的。我添加了 display: flex; .left 和 .right 类.

.parent {
    height: 100%;
    width: 100%;
}

.left, .right {
    float: left;
    height: 500px;
    width: 50%;
    display: flex;
}

.info {
    width: 400px;
    height: 280px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

在两个并排 50% 宽度的列中水平和垂直居中 2 个 div

Horizontally & Vertically centering 2 divs within two side by side 50% width columns

html

css

vertical-alignment

responsive-design