如何垂直和水平对齐两个div彼此相邻

Question

我有两个div，我想在页面顶部的中间水平和垂直居中，但尝试各种类型的“垂直对齐”＆amp; “margin：auto 0”命令根本无法正常工作（至少我正在尝试。有人可以请点亮我在这里出错的地方。请提前谢谢！

HTML：

<div class="wrapper">

  <div id="find-us" class="col-md-5">
    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Our Office</h5>
    Our office is located in the heart of Seven Sisters; an up and coming area in North London. Seven Sisters has had a lot of improvement in recent years with the Central & European investments into the area.<br>
    Seven Sisters have an excellent transport links. Commuters have the options of Victoria line to West End or British rail to Liverpool Street.<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Contact</h5>
    Telephone: 020 8211 0005<br>
    Email: enquiries@abbapropertyservices.co.uk<br>
    Address: ABBA Property Services, 88 West Green Road, London N15 5NS<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Transport</h5>
    Tube/Train: Seven Sisters Underground Station, Seven Sisters Railway Station, South Tottenham Railway Station<br>
    Bus: 41, N41<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Opening Hours</h5>
    Monday: 9am - 5pm<br>
    Tuesday: 9am - 5pm<br>
    Wednesay: 9am - 5pm<br>
    Thursday: 9am - 5pm<br>
    Friday: 9am - 5pm<br>
    Saturday: 10am - 1pm<br>
    Sunday: Closed<br>
  </div>

  <div id="find-photo" class="col-md-5">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2479.0948652696484!2d-0.07885818431106212!3d51.584824712860375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761c1135485d4b%3A0x487d1b5ae3bd4621!2s88+W+Green+Rd%2C+London+N15+5NS!5e0!3m2!1sen!2suk!4v1491925605605" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>

</div>

CSS：

#wrapper {
  vertical-align: bottom;
}
#find-us {
  margin: 0 auto;
  padding: 15px;
  border: 1px solid pink;
  font-size: 12px;
}
.col-centered{
  float: none;
  margin: 0 auto;
}
#find-photo {
  height: 100%;
}
#contact-form {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  margin-left: 30%;
  margin-top: 50px;
  text-align: center;
  border: 1px solid black;
}

Answer 1

display: flex; align-items: center; justify-content: center;

上的

.wrapper

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
#find-us {
  padding: 15px;
  border: 1px solid pink;
  font-size: 12px;
}
.col-centered{
  float: none;
  margin: 0 auto;
}
#find-photo {
  height: 100%;
}
#contact-form {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  text-align: center;
  border: 1px solid black;
}

<div class="wrapper">

  <div id="find-us" class="col-md-5">
    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Our Office</h5> Our office is located in the heart of Seven Sisters; an up and coming area in North London. Seven Sisters has had a lot of improvement in recent years with the Central & European investments into the area.<br> Seven Sisters have an excellent transport
    links. Commuters have the options of Victoria line to West End or British rail to Liverpool Street.<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Contact</h5> Telephone: 020 8211 0005<br> Email: enquiries@abbapropertyservices.co.uk<br> Address: ABBA Property Services, 88 West Green Road, London N15 5NS<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Transport</h5> Tube/Train: Seven Sisters Underground Station, Seven Sisters Railway Station, South Tottenham Railway Station<br> Bus: 41, N41<br><br>

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Opening Hours</h5> Monday: 9am - 5pm<br> Tuesday: 9am - 5pm<br> Wednesay: 9am - 5pm<br> Thursday: 9am - 5pm<br> Friday: 9am - 5pm<br> Saturday: 10am - 1pm<br> Sunday: Closed<br>
  </div>

  <div id="find-photo" class="col-md-5">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2479.0948652696484!2d-0.07885818431106212!3d51.584824712860375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761c1135485d4b%3A0x487d1b5ae3bd4621!2s88+W+Green+Rd%2C+London+N15+5NS!5e0!3m2!1sen!2suk!4v1491925605605"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>

</div>