万恶的垂直居中问题（包括多行文本）

在实际项目开发中，经常会遇到需要垂直居中的问题，下面给出常见的垂直居中问题解决方案，以及我在实际操作中遇到的问题和解决办法

第一种情况： 知道居中元素的高度

1、relative+absolute+负margin

给其父元素设置相对定位 position：relative；
给居中元素设置绝对定位 position：absolute；
对居中元素垂直方向进行定位 top：50%；
给居中元素设置上外边距 margin-top：-(居中元素的高度)；

假设居中元素的高度为100px，下面给出详细代码：

<div class='parent'>
    <div class='child'>
        我是居中元素
    <div>
</div>

<style>
.parent{
    position: relative;
    }
.child{
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    }
</style>

2、top:0+bottom:0+margin:auto

给其父元素设置相对定位 position：relative；
给居中元素设置相对定位 position：absolute；
对居中元素垂直方向进行定位 top：0；borttom：0；
给居中元素设置外边距：margin：auto；
（由于居中元素本身有高度，所以不可能top、bottom都为0，而margin：auto则会将它拉至垂直居中）

<div class='parent'>
    <div class='child'>
        我是居中元素
    <div>
</div>

<style>
.parent{
    position: relative;
}
.child{
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
</style>

3、position+calc

给其父元素设置相对定位 position：relative；
给居中元素设置绝对定位 position：absolute；
对居中元素进行垂直方向定位 top：calc(50%-自身高度的一半)；
（其中50%代表其父元素高度的一半）

<div class='parent'>
    <div class='child'>
        我是居中元素
    <div>
</div>

<style>
.parent{
    position: relative;
}
.child{
    height: 100px;
    position: absolute;
    top: calc(50%-50px);
}
</style>

4、padding+calc

直接给居中元素设置内边距 padding：calc(50%-自身高度的一半)；
（50%同样表示父元素高度的一半）

<div class='parent'>
    <div class='child'>
        我是居中元素
    <div>
</div>

<style>
.child{
    height: 100px;
    padding: calc(50%-50px);
}
</style>

需要注意的是 calc方法不支持IE8以下的浏览器，并且对IE8支持也不是很友好

第二种情况：居中元素高度未知

1、line-height

已知其父元素的高度；
给居中元素设置行高等于其父元素高度 line-height：height；
（此方法仅适用于块元素、行内块元素、单行文本）

<div class='parent'>
    <div class='child'>
        我是居中元素
    <div>
</div>

<style>
.parent{
    height: 100px;
}
.child{
    line-height: 100px;
}
</style>

2、vertical-align + inline-block

给居中元素设置 display：inline-block；
给居中元素设置垂直居中 vertical-align：middle；
（此方法仅对行内块元素有效）

<div class='parent'>
    <div class='child'>
        我是居中元素
    <div>
</div>

<style>
.child{
    display: inline-block;
    vertical-align: middle;
}
</style>

3、absolue+transform

给其父元素设置相对定位 position：relative；
给居中元素设置绝对定位 position：absolute；
对居中元素进行垂直方向定位 top：50%；
对居中元素进行垂直方向平移 transform：translate(-50% , 0)；
（top参考的是父元素高度，translate参考的是本身高度，此方法若有其它transform属性可能会相互影响，建议在没有其它transform属性时使用）

<div class='parent'>
    <div class='child'>
        我是居中元素
    <div>
</div>

<style>
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    transform: translate(-50%,0);
}
</style>

4、flex布局

给父元素设置 display：flex；
给居中元素设置 align-self：center；
（若同时存在其它布局容易产生影响）

<div class='parent'>
    <div class='child'>
        我是居中元素
    <div>
</div>

<style>
.parent{
    display: flex;
}
.child{
    align-self: center;
}
</style>

第三种情况：多行文本动态垂直居中

1、 table+table-cell

给其父元素设置 display：table；
给居中元素设置 display：table-cell；
给居中元素设置 vertical-align：middle；

这种方法比较常见，但是实际操作中却有一定限制，比如我遇到的如下情况

该图表由多层div嵌套，需要居中的div的父元素无法设置display：table，用简单的line-height设置行高则会导致多行文本显示不全，对于这种，一般是需要垂直居中的多行文本，另一半是图片的情况时，推荐使用如下方法：

2、line-height + inline-block

给其父元素设置 line-height 为自身高度 height；
把居中元素转换为行内块元素 display：inline-block；
给居中元素设置垂直居中 vertical-align：middle；
给居中元素设置合适的行高 line-height：合适的高度；
（我这里的文本最多只有两行，所以统一给行内块元素设置行高为1/2的父元素高度）

代码如下：

<div class='parent'>
    <div class='child'>
        我是居中元素
    <div>
</div>

<style>
.parent{
    line-height: 40px;
}
.child{
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
}
</style>

当然这种方法并不是没有缺点，也有以下几点需要注意

① vertical-align属性应该设置到 行内元素上（行内块元素也可）

② 如果文字的总高度超出了 容器（这里是div）的高度，那么垂直居中会失效。

③ ie7以下 span结束标签和内部内容不能有间隔空白，也就是说span的结束标签和内部内容要连在一起。