垂直居中

几种方法：

http://bbs.blueidea.com/thread-2666987-1-1.html

http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%A7%E5%B0%8F%E4%B8%8D%E5%9B%BA%E5%AE%9A%E7%9A%84%E5%9B%BE%E7%89%87%E3%80%81%E5%A4%9A%E8%A1%8C%E6%96%87%E5%AD%97%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

1.文字垂直居中

　　父元素高度确定：

　　　　一行文字：设置父元素line-height为自身的高度，则文字自动垂直居中（只能一行，不能多行）

　　　　　　　　父元素css{line-height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

　　多行文字：

　　　　　　方法1:(块元素内部，同一行所有内联元素的vertical-align=middle时，会将这些元素的垂直中点和父元素本行的基准线-半个x字符的高度进行对其，如果某一个元素的高度和父元素一样则其它内联元素就会垂直居中了)

　　　　　　　　添加一个子元素做为父元素的第一个子元素，设置此元素height为100%,vertical-align:middle;display:inline-block;

                   　要居中的文字用span包裹，并设置span的vertical-align:middle;

　　　　　　方法2:

　　　　　　　　父元素高度和字体大小存在一个特殊比例：高度=字体大小*1.14， 字体大小=高度*0.837

　　　　　　　　　　{font-size:1em;height:1.14em}　　{height:200px;font-size:175px} 200*0.837=175

　　　　　　　　文字用span包裹，文字

　　　　　　　　　　

2.子元素垂直居中

      父元素高度确定：

　　　　子元素高度确定：直接设置子元素的上下间距

　　　　子元素高度不定：

　　　　　　1.字体法，父元素高度=字体*1.14

　　　　　　2.样式display:table-cell方法（IE6,IE7不支持)

　　　　　　3.添加一个首元素{display:inline-block,height:100%;vertical-align:middle}，子元素{vertical-align:middle}

　　父元素高度不定：

　　　　　　1.样式display:table-cell方法（IE6,IE7不支持)

　　　　　　2.添加一个首元素{display:inline-block,height:100%;vertical-align:middle}，子元素{vertical-align:middle}

　　　　

　　

1.IE8+的浏览器

.miao{170px;height:100px;display:table;text-align:center;border:solid 1px red;}
.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}
.miao span img{border:dashed 1px green;}

2.IE6,IE7

.miao{position:relative;overflow:hidden;}
.miao span{position:absolute;left:50%;top:50%;}
.miao span img{position:relative;left:-50%;top:-50%;}

3