方案一：
<!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實現，但缺點是要知道置中內容的寬度和高度。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
