css解决文字垂直居中

一、单行垂直居中

这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

不过在InternetExplorer6及以下版本中，这和方法不支持对图片设置垂直居中

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的，那么我们设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码：

div{
padding:25px;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}

三、多行文本固定高度的居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

div#wrap{
height:400px;
display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}

<divid="wrap">

<divid="content">

<pre>现在我们要使这段文字垂直居中显示！div#wrap{
height:400px;
display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}</pre></div></div>上面的方法ie8及以下都不支持，下面是完美解决兼容性问题的方法：

四、完美的解决方案

.outer{
display:table;width:578px;overflow:hidden;
background:#eee;height:42px;
}
.middle{display:table-cell;vertical-align:middle;margin-left10px;}

<!--下面的CSS是针对IE8,IE7，IE6-->
<!--[iflteIE8]>
<style>
.outer{position:relative;}
.middle{position:absolute;top:50%;}
.inner{position:relative;top:-50%}
</style>
<![endif]-->

<divclass="outer">
<divclass="middle">
<divclass="inner">
把你要居中的文本放在这里
这是第二行
...
</div>
</div>
</div>