如何在响应式布局中无需绝对定位的情况下垂直对齐图像

Question

我知道margin-left:auto;和margin-right:auto;会将元素置于text-align:center;的中心位置。

我的问题是关于垂直对齐。

我想让我的图像与我的vh保持一致。

<section> 
  <div class="half">
    <img />
  </div>

  <div class="half">
    <img />
  </div>
</section>

型：

.half {
height:100%;
width: 50%;
display:inline-block;
float:left;  
}

.half img {
max-width:93%;
max-height:90%;
}

关于小提琴的一个例子： http://jsfiddle.net/f16wpgpm/3/

Answer 1

将position:relative;添加到.half，然后将以下CSS添加到img选择器：

margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;

Updated Fiddle

Answer 2

http://jsfiddle.net/f16wpgpm/6/

您可以使用display:table和display:table-cell。

section {
    display:table;
    width:100%;
}

.half {
    width: 50%;
    display:table-cell;
    vertical-align:middle;
}

Answer 3

您可以使用表格显示方法进行垂直对齐。但是，这需要内部<div>作为要对齐的单元格：

<div class="half first_half">
    <div class="inner">
        <img src="http://www.capitale-creativo.it/img/capcrea1.jpg" />
    </div>
</div>

然后将.half显示为表格并将.inner显示作为其单元格，您可以像这样添加vertical-align: middle;：

.half{
    height:100%;
    width: 50%;
    display:table;
    float:left;
}

.inner{
    display: table-cell;
    vertical-align: middle;
}

这里有效：http://jsfiddle.net/f16wpgpm/4/