使用Css实现水平垂直居中.docVIP

问题：假设有一个div，高宽都为200px，如何使得div内的内容水平居中？ 很简单，设置该div的style.textAlign为center。 div style=text-align:center;width:200px;height:200px;border:1px solid black; 水平居中示例。 /div 水平居中示例。 问题：假设有一个div，高宽都为200px，如何使得div内的内容垂直居中？ 使用table的话，解决这个问题相当简单。 table width=200 height=200 style=border:1px solid black; tr td valign=middle哈哈哈/td /tr /table 使用Table垂直居中 table width=200 height=200 style=border:1px solid black; tr td valign=middleimg src=/images/nav_logo3.png//td /tr /table table width=200 height=200 style=border:1px solid black; tr td valign=middle div 使用Table垂直居中br / 使用Table垂直居中br / 使用Table垂直居中br / /div /td /tr /table 使用Table垂直居中使用Table垂直居中使用Table垂直居中 若不使用table，这个问题则有些复杂。如果只考虑某一个浏览器，也不会复杂到哪里去，但若考虑兼容所有浏览器，需要下一定的功夫。由于Html元素我们可以分为三种：非可替换元素(如span、label等)、可替换元素(img)、块元素(div)。我们可以把这个问题分成简单的三个问题。 div中只有文字，高度宽度未知。 div中只有图片，高度宽度未知。(但图片大小小于div。) div中还有一个div，高度宽度已知。 第一个问题，可以使用line-height等于该div的高度来解决，这样会限制该div内只能有一行文字。 div style=width:200px;height:200px;border:1px solid black;line-height:200px; 文字的垂直居中。 /div 文字的垂直居中。 对于多行文字的div，纯css实现目前比较无奈，IE应该是没有办法做到。不过IE提供了expression，可以在这里面写一些js脚本，再加上position的relative和absolute，可以搞定多行文字的垂直居中。display的table和table-cell，FF是支持的。可以实现多行文字的垂直居中。下面代码中的_position、_left、_top的写法是专门针对IE的。 div style=width: 300; height: 200;border:1px solid #C0C0C0;_position:relative;display:table; div style=text-align:center;display:table-cell;_position: absolute;_top:expression((this.parentNode.offsetHeight-this.offsetHeight)/2);_left:expression((this.parentNode.offsetWidth-this.offsetWidth)/2);vertical-align:middle; 多行文字 br / 垂直居中 /div /div 多行文字 垂直居中 第二个问题，针对非IE浏览器，我们可以使用WEB标准里面的display:table-cell;vertical-align;middle;来解决。针对IE浏览器，则可以使用font-size的hack来解决。 div style=width:200px;height:200px;border:1px solid black;line-height:200px;display: table-cell;vertical-align:middle;*display: block;*font-size:175px;*font-family:Arial; img src=/images/nav_logo3.png style=vertical-align:middle;/ /div 注意这里font-size的大小不是200px，这是因为IE