css未知高度垂直居中
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title>CSS垂直居中</title> <style type="text/css"> div { display:table-cell; vertical-align:middle; text-align:center; width:500px; height:500px; background:#B9D6FF; border: 1px solid #CCC; } </style> <!--[if IE]> <style type="text/css"> i { display:inline-block; height:100%; vertical-align:middle } img { vertical-align:middle } </style> <![endif]--> </head> <body> <h1>垂直居中(inline-block法)</h1> <div class="container"> <i></i> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" /> </div> </body> </html>
它的核心就是为外边框加了display:table-cell,说起来display这个属性,指让标签元素以表格单元格的形式呈现,类似于td
标签,因为单元格可以使元素垂直居中。