div+css居中对齐布局.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,实现,div,容器水平居中的方法小结,实现,div,容器单行垂直居中,(,单行,),divheight:25px;line-height:25px;,overflow:hidden,;,后面使用,overflow:hidden,的设置是为了防止内容超出容器或者产生自动换行,未知高度文字的垂直居中（多行）,这种方法应用的前提就是容器的高度必须是可伸缩的,多行文本固定高度的居中,在本文的一开始，我们已经说过,CSS,中的,vertical-align,属性只会对拥有,valign,特性的,(X)HTML,标签起作用，但是在,CSS,中还有一个,display,属性能够模拟,，所以我们可以使用这个属性来让,模拟,就可以使用,vertical-align,了。注意，,display:table,和,display:table,-cell,的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个,元素：,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;,一个完美的居中方案就产生了,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%;,