3.多行文本的固定高度居中本文开头我们已经说过CSS中的vertical-align属性只会对具有valign特性的(X)HTML标签起作用，但是在CSS可以模拟表格，所以我们可以利用这个属性让div模拟表格，并使用vertical-align。注意，使用display:table和display:table-cell时，前者必须设置在父元素上，后者必须设置在子元素上，所以我们需要为需要定位的文本再添加一个div元素：代码提供by downcc.com() 片段：div#wrap { height:400px;显示：表； } div#content { 垂直对齐：middle;显示：表格单元格； border:1px实心#FF0099；背景颜色：#FFCCFF；宽度：760px； downcc.com() 提供的代码片段：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd' html xmlns='http://www.w3.org/1999/xhtml' head title 多行文本/标题元垂直居中http-equiv='Content-Type' content='text/html; charset=utf-8'/style type='text/css' body { font-size:12px;font-family:tahoma ;} div#wrap { height:400px;显示：表； } div#content { 垂直对齐：middle;显示：表格单元格； border:1px实心#FF0099；背景颜色：#FFCCFF；宽度：760px； } /style /head body div id='wrap' div id='content'pre 现在我们要将此文本垂直居中！ div#wrap { height:400px;显示：表； } div#content { 垂直对齐：middle;显示：表格单元格； border:1px实心#FF0099；背景颜色：#FFCCFF；宽度：760px； } /pre/div /div /body /html 这种方法应该是非常理想的，但是遗憾的是Internet Explorer 6 无法正确理解display:table 和display:table-cell，所以这种方法在Internet Explorer 6 及以下版本中无效。嗯，这真令人沮丧！但我们还有其他选择。 4. Internet Explorer 中的解决方案在Internet Explorer 6 及更低版本中，存在较高的计算缺陷。在Internet Explorer 6中定位父元素后，如果对子元素进行百分比计算，计算基础似乎是继承的（如果定位值是绝对值，则不存在此问题，但使用百分比计算基础将不再是元素的高度，而是继承自父元素的定位高度）。例如，我们有以下(X)HTML 片段： downcc.com() 提供的代码片段： div id='wrap' div id='subwrap' div id='content' /div /div /div 如果我们subwrap是绝对定位的，内容也会继承这个属性。虽然不会立即显示在页面上，但是如果你随后相对定位内容，那么你使用的100%比例就不再是内容了。原来的高度。比如我们设置subwrap的位置为40%，如果我们想让内容的上边缘与wrap重合，就必须设置top:-80%；那么，如果我们设置了subwrap的top:50%，就必须使用100%，这样才能让内容回到原来的位置，但是如果我们也将内容设置为50%呢？然后它就完全垂直居中了。
因此，我们可以在Internet Explorer 6 中使用此方法来实现垂直居中： downcc.com() 提供的代码片段： div#wrap { border:1px Solid #FF0099; }背景颜色：#FFCCFF；宽度：760px；高度：400px；位置：相对； } div #subwrap { 位置：绝对； border:1px实心#000；顶部：50%； } div#content { border:1px 固体#000;位置：相对；顶部：-50%；当然，这段代码只能在Internet Exlporer 6等有计算问题的浏览器中才会有效。 （但是我不太明白，查了很多文章，不知道是同源还是别的原因。
