Centering responsive sections with images inside

Question

I would like to focus the next jsfiddle on centering vertically at any time, the responsive design makes it difficult for me to guess where to get the value, because all the tutorials in StackOverflow say: "The div containing the content must have width and height." I made an image of how she is now (bad) and how I want her to be (good)

<- centered vertically and horizontally on all devices / widths / orientation

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

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

Markup

<div class="wrapper">
  <div class="rowOne">
    <div class="telefoonButton">
      <a href="tel:[phone]" 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:[e-mail]" 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

div rowOne rowTwo div, middle:

<div class="wrapper">
    <div class="middle">
        <div class="rowOne"></div>
        <div class="rowTwo"></div>
    </div>
</div>

CSS:

CSS

.wrapper{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.wrapper .middle {
    display: table-cell;
    vertical-align: middle;
}
.wrapper div{ text-align:center }
.wrapper div a{ display: inline-block }

Answer 2

css :

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


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

Answer 3

, . , HTML wrap div class .centered css position:absolute transform suing css3.. .

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

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

.centered {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-align: center;
}

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

<div class="wrapper">
  <div class="centered">
    <div class="rowOne">
      <div class="telefoonButton">
        <a href="tel:[phone]" 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:[e-mail]" 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>
</div>

Hide result

Answer 4

, .

html, body {
height: 100%;
}

body {
margin: 0;
}

.wrapper {
height: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
}

.centered {
position: relative;
overflow: hidden;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}

Answer 5

!

<div class="wrapper">
    <div class="middle">
  <div class="rowOne">
    <div class="telefoonButton">
      <a href="tel:[phone]" 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:[e-mail]" 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>
<div>
</div>

.telefoonButton, .mailButton, .infoButton, .contactButton {
  float: left;
}
.wrapper{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.wrapper .middle {
    display: table-cell;
    vertical-align: middle;
}
.wrapper div{ text-align:center }
.wrapper div a{ display: inline-block }
.rowOne, .rowTwo {
    width: 50%;
    height: auto;
    float: left;
}
.Absolute-Center.is-Image {
  height: auto;
}

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

Answer 6

css, :

.Absolute-Center.is-Image {
    display: block;
    margin: 0px auto;
  }