如何实现多行文字垂直居中？

   西安网页设计小编今天要给大家来解决的是未知多行文字如何实现垂直居中的问题，水平居中都好说text-aline：center，或者是margin：0 auto；但是你多行文字每行都不一样就不知道如何居中了。

    如果一行文字很好解决行高就是它的高度，如果你不考虑IE6使用display来让

模拟

就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个

元素：

    大容器：display:table及整体高度；小内容：vertical-align:middle;display:table-cell;

    不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的，还有的选择定位，但是很多时候IE6经常会碰到很多的问题，今天居中了，明天又不居中了，很多时候我们不常用定位的。往往完美的解决方案需要很长时间，但是也还是出现了.

#outer {height: 100%; overflow: hidden; position: relative;width: 100%;} #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%;} /* for explorer only*/ #middle[id] {display: table-cell; vertical-align: middle; position: static;} #inner {position: relative; top: -50%;margin: 0 auto;} /* for explorer only */ div.greenBorder {width:500px;height:584px;background:#333;} *+html #outer[id]{position: relative;} *+html #middle[id]{position: absolute; }

    以上代码的优点是没有bug，采用了IE不支持的2选择器 #value[id]。不过经过了三层才实现居中，过程够曲折的。

2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准能读懂。

    测试：1.5、Opera9.0、IE6.0、IE5.0通过。上面的代码不支持IE7，还需要在最下面加二句：

    *+html #outer[id]{position: relative;}

    *+html #middle[id]{position: absolute; }