实现实现divdiv容器水平居中的方法小结容器水平居中的方法小结实现实现divdiv容器单行垂直居中容器单行垂直居中((单行单行))•div{height: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:1pxsolid#FF0099;•background-color:#FFCCFF;•width:760px;•}•••••现在我们要使这段文字垂直居中显示
•div#wrap{•height:400px;•display:table;•}•div#content{•vertical-align:middle;•display:table-cell;•border:1