关于垂直居中的方式

垂直居中我们经常到会处理这种问题，但是对于各种不同的情况，自己是否又能够解决的得心应手呢？？

1. 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;
">
  ![](../../plugin/common/images/key-back.png)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真是个神奇的东西

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

对于垂直居中 认识暂时这么多，先写到这里吧，以后有更深的认识再写。