在父div中垂直居中内容div（以％为单位的宽度）

Question

我试图让＃contactboxsplit1（图片中的蓝色div）中的内容响应地垂直居中，而不是在它的父div的顶部，但无法弄清楚如何。

代码＆amp;截图发布在下方。在此先感谢您的帮助。 Ť

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用flex。通过制作容器# lua message( STATUS "Building Lua") include_directories(${PROJECT_SOURCE_DIR}/libs/luajit/src) add_subdirectory(${PROJECT_SOURCE_DIR}/libs/luajit) 并应用属性display: flex

正如您所看到的，我们不需要花车或任何其他东西。

编辑：由于某种原因，堆栈溢出代码段渲染未正确显示0_p

align-items: center;

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

jsfiddle