div+css居中对齐布局

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,实现div容器水平居中的方法小结,1,实现div容器单行垂直居中(单行),divheight:25px;line-height:25px;overflow:hidden;,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,2,未知高度文字的垂直居中（多行）,这种方法应用的前提就是容器的高度必须是可伸缩的,3,多行文本固定高度的居中,在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟，所以我们可以使用这个属性来让模拟就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个元素：,4,body font-size:12px;font-family:tahoma;,div#wrap ,height:400px;,display:table;,div#content ,vertical-align:middle;,display:table-cell;,border:1px solid #FF0099;,background-color:#FFCCFF;,width:760px;,现在我们要使这段文字垂直居中显示！,div#wrap ,height:400px;,display:table;,div#content ,vertical-align:middle;,display:table-cell;,border:1px solid #FF0099;,background-color:#FFCCFF;,width:760px;,5,一个完美的居中方案就产生了,body font-size:12px;font-family:tahoma;,div#wrap ,display:table;,border:1px solid #FF0099;,background-color:#FFCCFF;,width:760px;,height:400px;,_position:relative;,overflow:hidden;,div#subwrap ,vertical-align:middle;,display:table-cell;,_position:absolute;,_top:50%;,div#content ,_position:relative;,_top:-50%;,现在我们要使这段文字垂直居中显示！,div#wrap ,border:1px solid #FF0099;,background-color:#FFCCFF;,width:760px;,height:500px;,position:relative;,div#subwrap ,position:absolute;,border:1px solid #000;,top:50%;,div#content ,border:1px solid #000;,position:relative;,top:-50%;,6,