Html 内置图像的对中响应div

我想让下面的JSFIDLE始终垂直居中，响应性设计让我很难猜测从何处获取值，因为所有关于StackOverflow的教程都说“包含内容的div必须具有宽度和高度。” 我已经画了一幅插图，说明它现在是怎样的（坏）以及我希望它是怎样的（好）

---

首先，您应该向标记中添加额外的

div

，并将

rowOne

和

rowOne

放在额外的

div

中，名为

middle

：

标记

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

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

---

给出以下css将实现一个技巧：

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


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

---

请检查代码。。请在

HTML

中用

div

类

换行。居中

并在css

位置：绝对

和

转换

起诉css3。。这很简单也很酷

.wrapper{
高度：100vh；
保证金：0自动；
位置：相对位置；
宽度：100%；
}
.第一排，.第二排{
宽度：50%；
高度：自动；
浮动：左；
}
.绝对中心{
高度：自动；
}
.居中{
位置：绝对位置；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
文本对齐：居中；
}
.Absolute-Center.is-Image img{
宽度：50%；
高度：自动；
}

好的，试试这个

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%);
}

我解决了

<div class="wrapper">
    <div class="middle">
  <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>
<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;
}

.telefoonButton、.mailButton、.infoButton、.contactButton{
浮动：左；
}
.包装纸{
显示：表格；
位置：绝对位置；
身高：100%；
宽度：100%；
}
.包装纸.中间{
显示：表格单元格；
垂直对齐：中间对齐；
}
.wrapper div{text align:center}
.wrapper div a{display:inline block}
.第一排，.第二排{
宽度：50%；
高度：自动；
浮动：左；
}
.绝对中心{
高度：自动；
}
.Absolute-Center.is-Image img{
宽度：50%；
高度：自动；
}

更改css代码，如下所示：

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

---

嗯，在我看来，它仍然在顶部，而不是中心（垂直）

<div class="wrapper">
    <div class="middle">
  <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>
<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;
}

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