CSS文字垂直居中(div让文字垂直居中)

第三，固定高度的多行文本的中心

在本文的开始，我们已经说过CSS中的vertical-align属性只对具有valign特性的(X)HTML标签起作用，但是CSS中还有一个display属性可以模拟table，所以我们可以使用这个属性让div模拟table，这样就可以使用vertical-align了。注意如何使用显示：表格和显示：表格单元格。前者必须在父元素上设置，后者必须在子元素上设置，所以我们必须向需要定位的文本添加另一个div元素：

downcc.com提供的代码片段():

div#wrap {

高度：400px

显示：表格；

}

div #内容{

垂直对齐：居中；

显示：表格单元；

边框：1px纯色# FF0099

背景色：# FFCCFF

宽度：760px

}

downcc.com提供的代码片段():

！' DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD '

html xmlns=' http://www . w3 . org/1999/XHTML '

头

标题多行文本垂直居中/标题

meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /

style type='text/css '

body { font-size:12px；字体系列：tahoma}

div#wrap {

高度：400px

显示：表格；

}

div #内容{

垂直对齐：居中；

显示：表格单元；

边框：1px纯色# FF0099

背景色：# FFCCFF

宽度：760px

}

/风格

/头

身体

div id='wrap '

Div id='content'pre现在我们要让这个文本垂直居中显示！

div#wrap {

高度：400px

显示：表格；

}

div #内容{

垂直对齐：居中；

显示：表格单元；

边框：1px纯色# FF0099

背景色：# FFCCFF

宽度：760px

}

/前/后

/div

/body

/html

这种方法应该是比较理想的，但遗憾的是Internet Explorer 6无法正确理解display:table和display:table-cell，所以这种方法在Internet Explorer 6及以下版本中无效。嗯，真郁闷！但是我们有其他方法。

四。Internet Explorer中的解决方案

在Internet Explorer及以下版本中，高计算存在缺陷。在Internet Explorer 6中定位父元素后，如果进行子元素的百分比计算，计算的依据似乎是继承的(如果定位值是绝对的，没有问题，但是使用百分比计算的依据将不再是元素的高度，而是继承自父元素的定位高度)。例如，我们有以下(X)HTML代码片段：

downcc.com提供的代码片段():

div id='wrap '

div id=“子包装”

div id='content '

/div

/div

/div

如果我们已经绝对定位了子工作区，那么内容也将继承这个属性。虽然不会立即显示在页面中，但是如果我们再次相对定位内容，你使用的100%评分就不再是内容原来的高度了。例如，我们将重低音的位置设置为40%。如果要让内容的上边缘与wrap重合，必须设置top:-80%；所以，如果我们设置了顶部：子工作区的50%，我们必须使用100%来将内容恢复到原来的位置，但是如果我们也将内容设置为50%呢？然后就是垂直居中。所以我们可以用这个方法在Internet Explorer 6中实现垂直居中：

downcc.com提供的代码片段():

div#wrap {

边框：1px纯色# FF0099

背景色：# FFCCFF

宽度：760px

高度：400px

位置：相对；

}

div #子包{

位置：绝对；

边框：1px纯色# 000；

top:50%；

}

div #内容{

边框：1px纯色# 000；

位置：相对；

顶：-50%；

}

当然，这段代码只能在Internet Exlporer 6等有计算问题的浏览器中工作。然而，我不明白。查阅了很多文章，不知道是出自同一出处还是出于什么原因。