html - 在父 div 内垂直居中内容 div(宽度百分比)

Question

我试图让#contactboxsplit1(图片中的蓝色 div)中的内容以响应方式垂直居中，而不是位于其父 div 的顶部，但无法弄清楚如何。

代码和屏幕截图如下。在此先感谢您的帮助。

.contactsplitwrapper {
  display: block;
  width: 100%;
  float: left;
  color: #000;
  padding-bottom: 7%;
}

.contactsplitwrapper a {
  color: #000;
}

.contacttitle {
  display: block;
  width: 100%;
  float: left;
  padding: 3% 0 1% 0;
}

.contactboxsplit {
  display: block;
  width: 50%;
  float: left;
}

#contactboxsplitmain {
  background: #2A06E4;
}

#contactboxsplit1 {
  display: block;
  width: 100%;
  margin: 0 auto;
  background: #2A06E4;
}

#contactboxsplit1 img {
  width: 7%;
  padding-right: 3%;
  height: .1;
}

.contactboxhalf {
  width: 49%;
  float: left;
  display: block;
}

#contactboxhalf2 {
  border-left: solid 1px #000;
}

#contactboxsplit2 {
  background: #F31115;
}

#contactboxsplit2 img {
  width: 70%;
  display: block;
}

<div class="contactsplitwrapper" id="#p7">
  <div class="contacttitle">
    <header>
      <h2> Where to find us</h2>
    </header>
  </div>
  <div class="contactboxsplit" id="contactboxsplitmain">
    <div id="contactboxsplit1">
      <p>
        <h3>For bookings & events please email us at <a href="mailto:info@ninelivesbar.com">info@ninelivesbar.com</a> or please call 0207 407 8226.<br></h3>
      </p>
      <div class="contactboxhalf" id="contactboxhalf1">
        <h3>
          <a href="http mapslink">
					'NINE LIVES'<br>
					BASEMENT<br>
					8 HOLYROOD STREET<br> 
					LONDON <br>
					SE1 2EL<br></p></a>
          <p>
            <img src="img/phone.png" class="phoneicon">0207 407 8226<br>
            <img src="img/mailicon.png">info@ninelivesbar.com<br>
          </p>
        </h3>
      </div>
      <div class="contactboxhalf" id="contactboxhalf2">
        <h3>
          Opening times<br><br> Mon | Closed.. for now<br> Tue | 5pm - Midnight<br> Wed | 5pm - Midnight<br> Thu | 5pm - Late<br> Fri | 5pm - Late<br> Sat | 5pm - Late<br> Sun | Closed.. for now<br></h3>
        <!-- Left align -->
      </div>
    </div>
  </div>
  <div class="contactboxsplit">
    <div id="contactboxsplit2">
      <img src="img/location.png">
    </div>
  </div>
</div>

Answer 1

您可以为此使用 flex。通过使容器 display: flex 并应用属性 align-items: center;

如您所见，我们实际上不需要 float 或其他任何东西。

编辑:出于某种原因，堆栈溢出代码段呈现未正确显示 0_p

.container {
  height: 500px;
  display: flex;
  align-items: center;
}

<div class="container">
  <div>
    <img src="http://www.placecage.com/200/300">
  </div>
  <div>
    <img src="http://www.placecage.com/100/100">
  </div>
</div>

jsfiddle