请教一个关于垂直居中的问题~

Question

关于垂直居中,在一行中有img/span/inline-block,我们可以通过设置元素的vertical-align:middle;让元素垂直对齐,但是我发现浮动会破坏这种属性。
如果我们将其中一个元素设置成浮动属性（float:left/right;）,就不会垂直居中对齐了！
有木有什么方法可以解决这个问题,还是说需要使用其他的方法垂直居中对齐。

Answer 1

可以看看我翻译的文章《你所不知道的 CSS - 居中》传送门

Answer 2

这个属性是针对内联元素的，如果设置浮动，元素就会block化，所以不会生效；关于垂直居中的问题，建议百度了解一下。

Answer 3

1. 在知道高度的情况下position：absolute；top：50%；margin-top：-height/2；
   2.在不知道高度的情况下：position：absolute；top：50%；tansform：translate（0，-50%）

3.还有一个就是flex的middle

Answer 4

.parent{
  position:relative;
}
.child{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

Answer 5

你可以试试这种方法：

<div class="parentBox">
    <div class="childBox">
       <!--content-->
    </div>
</div>

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