以图像为中心，以图像为中心。-centeringresponsivedivswithimagesinside

1  

Give following css will do a trick:

给予以下css将做一个小技巧:

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


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

Updated Fiddle

更新的小提琴

1  

First you should add extra div to your markup and put rowOne and rowTwo in the extra div, named middle:

首先，您应该在标记中添加额外的div，并将rowOne和rowTwo放在额外的div中，命名为middle:

Markup

标记

Then you should add some CSS:

然后你应该添加一些CSS:

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 }

1  

Please check code.. Please in HTML wrap with div class .centered and in css position:absolute and transform suing css3 .. Its pretty easy and cool.

请检查代码. .请在HTML包装与div类。居中和css位置:绝对和转换起诉css3。很简单，很酷。

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

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

0  

Ok, try this.

好吧,试试这个。

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

0  

I worked it out!

我出来工作!

    

  

    

      
    
    

      
    
  
  

    

      
    
    

      
    
  
  



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

0  

Change your css code like below:

更改css代码如下所示:

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