這種方式主要是針對文本高度不確定度情況，可能是一行或多行文本。
實現方式分兩種情況，第一種是古董瀏覽器，IE6/7，第二種是現代瀏覽器IE8/9/FF/Chrome等。
IE6/7需要三個元素層：
外層是包裹層，也可以當為模組層，必要屬性是position/height，
中介層是位移層，必要屬性是position/top:50%，
內層是文本層，必要屬性是position/top:-50%。
設定top一正一負剛好抵消位移，保證文本層始終在中間。
IE8/9/FF/Chrome不需要那麼麻煩，只需要兩個層，
外層同樣是包裹層，必要屬性：display:table，
內層是文本層，可直接包含文本，必要屬性：display:table-cell/vertical-align:middle，
只需要簡單的必要三個屬性即可實現。
執行個體代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>ie中垂直置中</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">#div1{ width:300px; position:absolute; border:1px solid #000; top:100px; left:200px; display:table;}.div2{ display:table-cell; vertical-align:middle; *position:absolute; *top:50%;}span{ *position:relative; *top:-50%;}button{ cursor:pointer;}</style><script> function add(){ var div1=document.getElementById('div1'); var h=div1.offsetHeight; div1.style.height=h+30+'px'; } function reduce(){ var div1=document.getElementById('div1'); var h=div1.offsetHeight; div1.style.height=h-30+'px'; }</script></head><body><div id="div1" style="height:200px"> <div class="div2"> <span>IE6/7使用定位關係來垂直置中，IE8/9使用display:table和display:table-cell</span> </div></div><button type="button" id="add" onclick="add()">增加高度</button><br/><br/><button type="button" id="reduce" onclick="reduce()">減少高度</button></body></html>
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
