文本垂直居中的几种方法

原文链接
vertical-align属性只会在inline-block的元素上起作用，但是其影响到的元素涉及到inline元素，inline元素受vertical-align属性影响而位置改变等不是因为其对vertical-align属性起作用，而是受制于整个line box的变化

1.单行文本垂直居中

设置文本高度height和所在行的高度line-height相等。
使用overflow:hidden防止内容超出容器或产生自动换行，这样就无法达到垂直居中效果了。

2.多行未知高度文本的垂直居中

1）padding

设置padding，使上下的padding值相同即可。
前提：容器的高度必须是可伸缩的。

2）绝对定位

      #content {
        position:absolute;
        top: 50%;
        transform: translateX(-50%);
      }

3.多行文本固定高度的垂直居中

1）vertical-align属性

CSS中的vertical-align属性只对拥有valign特性的(X)HTML标签起作用，幸运的是，CSS中还有一个display属性可以模拟<table>,从而可以使用vertical-align。
注意：display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此要为需要定位的文本添加一个父元素<div>。
不幸的是IE 6 及更低版本并不能正确地理解display:table和display:table-cell

2）绝对定位

适用于固定文案

    <style type="text/css">
      #wrap {
        position:relative;
      }
      #content {
        position:absolute;
        top: 50%;
        margin-top: content高度的一半
      }
    </style>