在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题"，或者 "图片垂直居中问题"，而我们最容易会想到使用表格来垂直居中，或者如果是单行文字的话使用height(高度)和line-height（行高）来解决，但是假如页面有多行文字的话 固定高度该怎么解决? 或者未知高度我们该用css怎么解决? 且兼容各个游览器！
一：单行文字垂直居中：
如果一个容器中只有一行文字的话，让他垂直居中比较简单 直接定义height(高度)和 line-height(行高)相等即可。如：
<div style="height:25px;line-height:25px;overflow:hidden">aa</div>
二：多行文本固定高度垂直居中：
1. 除IE7及IE7以下游览器 多行文本固定高度垂直居中的解决方案。
我们都知道 我们可以用表格的方式 实现文本垂直居中，同理 我们可以用css来模拟表格的方式垂直居中 vertical-align 属性只会对拥有valign特性的(X)HTML标签起作用,比如td等，但是对类似于span等这样的标签并不起作用，如果我们不考虑IE7及以下的话 我们可以用display:table 和 display:table-cell来模拟表格垂直居中。前者必须设置在父级元素上，后者必须设置在子元素上。比如 如下HTML代码：
<div class="wrapper"> <div class="content">content age</div> </div>
相对应的css代码如下：
.wrapper{ height:400px; display:table; } .content{ vertical-align:middle; display:table-cell; border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; }
就可以实现除IE7及IE7以下的游览器支持文本垂直居中的问题！
2. 兼容IE6+ 火狐 google游览器的多行文本垂直居中的解决方案！
其实在标准游览器中 解决的方案如上，现在的问题我们该怎么解决IE7及以下的版本的问题了，我们可以考虑用定位的方式来解决，在IE6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。
比如HTML代码如下：
<div class="wrap"> <div class="subwrap"> <div class="content">aaaaa</div> </div> </div>
我们可以对父级元素绝对定位 top:50%;然后在对子元素定位top:-50%,这样可以正好重叠了。css代码如下：
.wrap{ border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; height:400px; position:relative; } .subwrap{ position:absolute; border:1px solid #000; top:50%; } .content{ border:1pxsolid#000; position:relative; top:-50%; }
所以针对上面的解决方案，我们可以稍微优化下 在标准游览器下 我们使用类似于 表格的方式来解决 但是对于像IE7及以下的版本 我们可以使用绝对定位的方式来解决。所以优化下 css代码如下：
.wrap{ display:table; border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; height:400px; *position:relative; overflow:hidden; } .subwrap{ vertical-align:middle; display:table-cell; *position:absolute; *top:50%; } .content{ *position:relative; *top:-50%; }
三：多行文本 未知高度垂直居中的解决方案：
其实思路还是上面的一样 标准游览器版本下 采用类似于表格的方式来 垂直居中 解决，对于IE7 6下采用定位的方式来解决。如下代码
HTML：
<div class="wrapper"> <div class="subwrap"> <div class="content"> 关于 CSS 的未知高度水平垂直居中问题<br /> </div> </div> </div>
css：
body {padding:0;margin:0;} .content{border:1px solid red;width:500px;margin:0 auto;font-size:12px;line-height:1.8;} /*标准游览器版本*/ html,body{height:100%;} .wrapper{text-align:center;width:100%;height:100%;display:table;} .subwrap{display:table-cell;vertical-align:middle;} /*IE6*/ *html .wrapper{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto} *html .subwrap{position:relative;top:-50%;text-align:center;} /*IE7 可以合并 但是为了更好说明 没有合并*/ *+html .wrapper{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto} *+html .subwrap{position:relative;top:-50%;text-align:center;}
引用出处：http://www.cnblogs.com/tugenhua0707/p/3454942.html
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。