本文方法来自网络,在此只做总结,原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html
方法一:单行垂直居中只需要设置它的实际高度height和所在行的高度line-height相等即可
div { height:25px; line-height:25px; overflow:hidden; }
overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了
方法二:多行未知高度文字的垂直居中就是设定Padding,使上下的padding值相同即可
div { padding:25px; }
方法三:多行文本固定高度的居中,让<div>模拟<table>就可以使用vertical-align了。
注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素
注:此方法在IE6及其以下版本中无效
方法四:完美的解决方案,要用到CSS hack的知识
div#wrap { display:table; _position:relative; overflow:hidden; } div#subwrap { vertical-align:middle; display:table-cell; _position:absolute; _top:50%; } div#content { _position:relative; _top:-50%; }