CSS在未知高度文字垂直居中2种方法

在table中实现文字垂直居中是一件很容易的事，不过在css下就令前端开发人员头疼了，以下提供2种解决方案：

站长教学网 eduyo.comie6,ie7,ie8,firefox,chrome测试通过

inline-block 实现的浏览器通用居中

<!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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block 垂直居中</title> <style type="text/css"> .itm { border:2px solid #ccc; width:160px; height:360px; text-align:center; } .blank { width:0; height:100%; display:inline-block; vertical-align:middle; *zoom:1; *display:inline; } img { border:none; } .center { vertical-align:middle; display:inline-block; vertical-align:middle; *zoom:1; *display:inline; border:2px solid red; } </style> </head> <body> <p> inline-block 实现的浏览器通用居中</p> <div class="itm"> <div class="blank"></div> <div class="center"> <p>我是凑数的</p> <p>我是凑数的</p> <p>我是凑数的</p> <p>我是凑数的</p> </div> </div> </body> </html>
[站长教学网提示：Ctrl+A全选/可修改后代码再运行！]

inline-block 实现的浏览器通用居中站长教学网 eduyo.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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>position for ie 垂直居中</title> <style type="text/css"> #box4_wrapper { border:1px solid red; height: 200px; width: 800px; overflow: hidden; display: table; *position: relative; *display:block; } #box4_outer { display: table-cell; vertical-align: middle; *position: absolute; *top: 50%; *display:block; } #box4_inner { width:100px; border:1px solid black; *border:1px solid green; *position: relative; *top: -50%; margin: 0 auto; background: #eee } </style> </head> <body> <p> ie6,7 relative,absolute 实现居中 ,其他 display-table 居中</p> <div id="box4_wrapper"> <div id="box4_outer"> <div id="box4_inner"> 这是一种无 hack 的方式<br /> 虽然环保，但是臃肿:( </div> </div> </div> </body> </html>
[站长教学网提示：Ctrl+A全选/可修改后代码再运行！]

(责任编辑：ken)

搜索

热门标签:

CSS在未知高度文字垂直居中2种方法