元素及文本的水平居中/垂直居中/绝对居中总结

一.层的横向居中

<style>
#div1{width:600px;height:600px;}
#div2{width:400px;height:200px;}
</style>
<divid=”div1″>
<divid=”div_2″>div2</div>
</div>

要让div2在div1中横向居中，解决办法如下：
1.IE中，设置div1的样式：text-align:center;该方法在IE8以上版本和firefox中仅适用于行内元素居中（display:inline;和display:inline-block;及类似效果的元素以及文本，如inputimg等），子元素中的div、table等具有类似display:block效果元素将继承这个样式使文本居中,但是容器元素本身并不会居中。
2.IE7以上和firefox中，设置div2样式：margin:auto;仅对具有类似display:block效果的元素生效，对display为inline、inline-block的元素不生效，一般用于div、table等位置定位的容器元素，margin样式auto效果是横向居中，并置顶。
3.div2不能是position:absolute;绝对定位将使浏览器无法对元素自动排版，需依赖left、right属性，除非明确设定left:0,right:0;
综合以上：

#div1{
*text-align:center;/*ie*/
}
#div2{
margin:auto;
display:block;
*display:inline;/*ie*/
*zoom:1;/*ie*/
}

二.层的垂直居中
1.最常见的就是表格元素的vertical-align:middle;和css中的vertical-align:middle;
css中的vertical-align:middle;与表格的vertical-align不太一样，该样式作用于inline-block(或具有类似行内块状效果)的元素与其父元素内的文本或祖先元素内的文本（如果该祖先元素内的inline-block元素没有设置vertical-align样式）在垂直方向的对齐方式。
vertical-align无法影响后代元素的内容的对齐方式。
vertical-align对block元素不起作用，因为折行了在垂直方向没有对齐可言。
vertical-align作用于inline元素(如span)时，将决定该元素自身如何对齐于同一行内的inline-block元素，无法影响同辈元素或文本的对齐方式。
vertical-align取值为text-toptext-bottom时，对齐方式涉及文本的inline-box模型，
inline-box模型的高度由line-height(可以是继承来的)决定，分为content-area、top、bottom几个部分，其中的content-area是由文字大小决定，如果过line-height很大，font-size较小，加上背景颜色，我们就看到的背景色区域就是content-area，
text-top和text-bottom并不是可见的文字的顶端和底端（IE6-8在渲染text-top和text-bottom时，错误地将content-area的顶端和底端作为对齐的基准）。
具体的解释参考这里：
https://www.Vevb.com/css/70053.html
一个例子，firefo、chrome与IE有差别：

<divstyle=”line-height:200px;border:1pxsolid#34538b;”>
<spanstyle=”font-size:60px;border:1pxsolid#a0b3d6;vertical-align:text-top;”>大大的文字</span>后面是静止的文字。