html - 将响应式 div 与内部图像居中

Question

我想将以下 jsfiddle 始终居中，响应式设计让我很难猜测从哪里获取值，因为 StackOverflow 上的所有教程都在说“包含内容的 div 必须具有宽度和高度。” 我已经制作了一张图片说明它现在的样子(坏)以及我希望它变成什么样的样子(好)

<-- 在所有设备/宽度/方向上垂直和水平居中

https://jsfiddle.net/34o9vcba/9/

https://jsfiddle.net/34o9vcba/9/embedded/result/

标记

<div class="wrapper">
  <div class="rowOne">
    <div class="telefoonButton">
      <a href="tel:0652333817" title="Bel ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/phoneNook.png" alt="telefoon" class="Center-Block Absolute-Center is-Image"></a>
    </div>
    <div class="mailButton">
      <a href="mailto:slotenmakerdenhaag@gmail.com" title="Mail ons"><img src="http://eightytwenty.nl/wordpress/wp-content/uploads/2015/12/mailNook.png" alt="mail" class="Center-Block Absolute-Center is-Image"></a>
    </div>
  </div>
  <div class="rowTwo">
    <div class="infoButton">
      <a href="contact" title="Bel ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/infoNook.png" alt="telefoon" class="Center-Block Absolute-Center is-Image"></a>
    </div>
    <div class="contactButton">
      <a href="contact#contact" title="Mail ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/contactNook.png" alt="mail" class="Center-Block Absolute-Center is-Image"></a>
    </div>
  </div>
</div>

CSS

.wrapper {
    height: 80vh;
    margin: 0 auto;
    width: 90%;
}
.rowOne, .rowTwo {
    width: 50%;
    height: auto;
    float: left;
}
.Absolute-Center.is-Image {
  height: auto;
}

.Absolute-Center.is-Image img {
  width: 50%;
  height: auto;
}

Answer 1

给下面的 css 会做一个技巧:

.rowOne > div {
    text-align: center;
}


.rowTwo > div {
    text-align: center;
}

Updated Fiddle