垂直居中我们经常到会处理这种问题，但是对于各种不同的情况，自己是否又能够解决的得心应手呢？？
-
line-height的垂直居中
line-height使得元素居中 是我们最常用的。
首先我们来看 inline元素
<div class="content" style="
height: 200px;
background-color: bisque;
line-height: 200px;
">
<span>line-height的垂直居中 inline元素</span>
</div>
image.png
表现很正常
下面再来看 inline-block元素
<span style="
background-color: royalblue;
display: inline-block;
height: 60px;
">line-height的垂直居中 inline-block元素</span>
image.png
额 这是怎么了
这是因为 子元素默人继承了父元素的line-height。
再看block元素
<span style="
background-color: royalblue;
display: block;
height: 60px;
/* overflow: hidden; */
">line-height的垂直居中 block元素</span>
image.png
接下来 我们在拓展一下，我们再来看利用此方法进行图片的垂直居中
<div class="content" style="
background-color: aquamarine;
height: 200px;
line-height: 200px;
">
line-height垂直居中
</div>
啊呀呀 竟然没有居中
image.png
这是什么鬼？让我们来一起找这个鬼的本质。
说到这个 我们就要提到一个属性了，这就是大名鼎鼎的 vertical-aligin 因为图片一般默认的vertical-align：baseline;这就是没有居中的原因了，我们只需
<img src="../../plugin/common/images/key-back.png" style="
vertical-align: middle;
">line-height垂直居中</div>
image.png
感觉css真是个神奇的东西
-
display:table-cell的垂直居中
<div class="content" style="
height: 200px;
background-color: bisque;
vertical-align: middle;
display: table-cell;
">
<span style="
background-color: royalblue;
display: block;
height: 60px;
">table-cell的垂直居中 block inline-block inline元素都适应</span>
</div>
image.png
对于垂直居中 认识暂时这么多，先写到这里吧，以后有更深的认识再写。
