html不知道高文字垂直居中,css实现固定高度及未知高度文字垂直居中的完美解决方案...

在工做当中咱们常常碰到相似于"固定高度文字垂直居中及未知高度垂直居中问题"，或者 "图片垂直居中问题"，而咱们最容易会想到使用表格来垂直居中，或者若是是单行文字的话使用height(高度)和line-height(行高)来解决，可是假如页面有多行文字的话 固定高度该怎么解决? 或者未知高度咱们该用css怎么解决? 且兼容各个游览器！

一：单行文字垂直居中：

查看效果：http://keleyi.com/keleyi/phtml/divcss/14.htm

若是一个容器中只有一行文字的话，让他垂直居中比较简单 直接定义height(高度)和 line-height(行高)相等便可。

如：

keleyi.com

二：多行文本固定高度垂直居中：

1. 除IE7及IE7如下游览器 多行文本固定高度垂直居中的解决方案。

查看效果：http://keleyi.com/keleyi/phtml/divcss/14a.htm

咱们都知道 咱们能够用表格的方式 实现文本垂直居中，同理 咱们能够用css来模拟表格的方式垂直居中 vertical-align 属性只会对拥有valign特性的(X)HTML标签起做用,好比td等，可是对相似于span等这样的标签并不起做用，若是咱们不考虑IE7及如下的话 咱们能够用display:table 和 display:table-cell来模拟表格垂直居中。前者必须设置在父级元素上，后者必须设置在子元素上。好比 以下HTML代码：

keleyi.com

相对应的css代码以下：

.wrapper{

height:400px;

display:table;

}

.content{

vertical-align:middle;

display:table-cell;

border:1pxsolid#FF0099;

width:760px;

}

就能够实现除IE7及IE7如下的游览器支持文本垂直居中的问题！

2. 兼容IE6+ 火狐 google游览器的多行文本垂直居中的解决方案！

查看效果：http://keleyi.com/keleyi/phtml/divcss/14b.htm

其实在标准游览器中 解决的方案如上，如今的问题咱们该怎么解决IE7及如下的版本的问题了，咱们能够考虑用定位的方式来解决，在IE6中对父元素进行定位后，若是再对子元素进行百分比计算时，计算的基础彷佛是有继承性的(若是定位的数值是绝对数值没有这个问题，可是使用百分比计算的基础将再也不是该元素的高度，而从父元素继承来的定位高度)。

好比HTML代码以下：

keleyi.com

咱们能够对父级元素绝对定位 top:50%;而后在对子元素定位top:-50%,这样能够正好重叠了。css代码以下：

.wrap{

border:1pxsolid#FF0099;

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;

width:760px;

height:400px;

*position:relative;

overflow:hidden;

}

.subwrap{

vertical-align:middle;

display:table-cell;

*position:absolute;

*top:50%;

}

.content{

*position:relative;

*top:-50%;

}

三：多行文本 未知高度垂直居中的解决方案：

http://keleyi.com/keleyi/phtml/divcss/14c.htm

其实思路仍是上面的同样 标准游览器版本下 采用相似于表格的方式来 垂直居中 解决，对于IE7 6下采用定位的方式来解决。以下代码

HTML：

关于 CSS 的未知高度水平垂直居中问题 keleyi.com

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;}css

原文：http://www.cnblogs.com/tugenhua0707/p/3454942.htmlhtml