方案一：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; display:table; text-align:center; #position:relative; } #middle{ display:table-cell; vertical-align:middle; #position:absolute; #top:50%; #left:50%; } #inner{ #position:relative; #top:-50%; #left:-50%; } </style> </head> <body> <div id="outer"> <div id="middle"> <img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/> </div> </div> </body> </html>
方案二:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; position:relative; } #inner{ position:relative; left:50%; top:50%; margin-left:-71px; margin-top:-27px; } </style> </head> <body> <div id="outer"> <img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/> </div> </body> </html>
方案一主要原理是标准浏览器下用table和table-cell布局，然后用vertical-align:middle居中元素，但IE67不支持table布局，所以用了用了css hake，就是带#开头的属性。
方案二用负margin实现，但缺点是要知道居中内容的宽度和高度。