本文转自：http://qsfwy.iteye.com/blog/250206
在div 中让 文字或图片居中,请参考以下代码1： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>居中</title> </head> <style type="text/css"> .imageWrap{ width:200px; height:200px; text-align:center; border:#999 solid 1px; display:table-cell; vertical-align:middle; position:relative;} .imageWrap .outer{ +position:absolute; +top:50%;+left:0} .imageWrap .inner{ +position:relative; +top:-50%;+left:0} .imageWrap img{ display:block; margin:0 auto} </style> <body> <div class="imageWrap"> <div class="outer"> <div class="inner"> <img src="http://www.baidu.com/img/baidu.gif"/> <a href="#">百度</a> </div> </div> </div> </body> </html> 参考代码2： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <style type="text/css"> <!-- .frame{ float:left; margin:2px; } .outer { height: 250px; width: 240px; overflow: hidden; background:gold; position: static !important; position: relative; display: table !important; } #middle { /* for explorer only*/ position: absolute; top: 50%; } #middle[id] { display: table-cell; vertical-align: middle; position: static; } #inner { /* for explorer only */ position: relative; top: -50%; width: 100%; margin: 0 auto; text-align:center } </style> </head> <body> <div class="frame"> <div class="outer"> <div id="middle"> <div id="inner"><img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /></div> </div> </div> </div> <div class="frame"> <div class="outer"> <div id="middle"> <div id="inner"> <img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /><br /><br /> <img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /> </div> </div> </div> </div> <div class="frame"> <div class="outer"> <div id="middle"> <div id="inner">图片与文本内容混合<br><img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" /><br>图片与文本内容混合</div> </div> </div> </div> <div class="frame"> <div class="outer"> <div id="middle"> <div id="inner"><span>图片与文本</span><img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" align="middle" /><span>图片与文本</span></div> </div> </div> </div> <div class="frame"> <div class="outer"> <div id="middle"> <div id="inner">5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br></div> </div> </div> </div> </body>