未知寬高div水平垂直置中3種方法，div水平置中3種
<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><!--方法1：一個未知寬高的彈出框，水平垂直置中--><div style="position:relative;width:100%;height:600px;border:1px solid #888">方法1<div class="modal"> <div class="modal-header">彈出窗標題</div> <div class="modal-body"> 開發人員大會（北京）的成功舉辦，引起業界的極大關注。 應廣大開發人員的強列要求，深圳開發人員大會也在如火如荼的籌備中。 本文總結了技術團隊不應錯過2014年深圳開發人員大會的十個理由 </div></div></div><style type="text/css">.modal-header { padding: 10px 20px; background: rgba(0,0,0,.25); color:#fff;}.modal-body{ padding: 20px; background: #fff;}.modal { border: 1px solid #888; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.5); /**主要代碼*/ position:absolute; top:50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}</style><!--方法1 end--><!--方法2 parent-panel內的元素水平垂直置中--><div class="parent-panel">方法2<div class="middle-panel"><p>深圳站依舊秉承“演講從實踐出發、聽眾從中受益”的原則，在保持北京站特色之餘，針對開發的新情況重新設定了議程，內容來源於實踐又富於啟發性。</p><p>正進行開發的Team Dev（開發人員）、有興趣或即將投身於開發的開發人員、想開發相關應用正努力尋找Team Dev的傳統IT企業，該會將是你不容錯過的學習借鑒成功研發經驗、尋找合作的大好機會。</p><p>如果你還在猶豫，可以仔細閱讀一下主辦方總結的技術團隊不應錯過2014年開發人員大會深圳站的十個理由。</p></div></div><style type="text/css">.middle-panel{width:500px;border:1px solid #888;}.parent-panel{width:100%;height:400px;border:1px solid #888;/**主要代碼*/display: flex; align-items: center; justify-content: center;}</style><!--方法2 end--><!--方法3 parent-panel2內的元素垂直置中--><div class="parent-panel2">方法3<div class="middle-panel2"><p>深圳站依舊秉承“演講從實踐出發、聽眾從中受益”的原則，在保持北京站特色之餘，針對開發的新情況重新設定了議程，內容來源於實踐又富於啟發性。</p><p>如果你還在猶豫，可以仔細閱讀一下主辦方總結的技術團隊不應錯過2014年開發人員大會深圳站的十個理由。</p></div></div><style type="text/css">.middle-panel2{width:500px;border:1px solid #888;display:inline-block; vertical-align: middle;}.parent-panel2{width:100%;height:400px;border:1px solid #888;}.parent-panel2:after{/**主要代碼*/content:""; display: inline-block; vertical-align: middle; height: 100%;}</style><!--方法3 end--></body></html>
說明，本文中所指的DIV包括HTML頁面中所有的元素。讓一個DIV水平置中，直接用CSS就可以做到。只要設定了DIV的寬度，然後使用margin設定邊距0auto，CSS自動算出左右邊距，使得DIV置中。.mydiv{margin:0auto;width:300px;height:200px;}但是如果要使DIV垂直方向也置中，恐怕CSS需要修改了。CSS實現水平和垂直置中要讓DIV水平和垂直置中，必需知道該DIV得寬度和高度，然後設定位置為絕對位置，距離頁面視窗左邊框和上邊框的距離設定為50%，這個50%就是指頁面視窗的寬度和高度的50%，最後將該DIV分別左移和上移，左移和上移的大小就是該DIV寬度和高度的一半。.mydiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px00-150px}該方法使用普遍，但是前提是必需設定DIV的寬度和高度。如果當頁面DIV寬度和高度是動態，比方說需要彈出一個DIV層並且要置中顯示，DIV的內容是動態，所以寬度和高度也是動態，這時需要用jQuery可以解決置中。jQuery實現水平和垂直置中jQuery實現水平和垂直置中的原理就是通過jQuery設定DIV的CSS，擷取DIV的左、上的邊距位移量，邊距位移量的演算法就是用頁面視窗的寬度減去該DIV得寬度，得到的值再除以2即左位移量，右位移量演算法相同。注意DIV的CSS設定要在resize()方法中完成，就是每次改變視窗大小時，都要執行設定DIV的CSS，代碼如下：$(window).resize(function(){$(".mydiv").css({position:"absolute",left:($(window).width()-$(".mydiv").outerWidth())/2,top:($(window).height()-$(".mydiv").outerHeight())/2});});此外在頁面載入時，就需要調用resize()。$(function(){$(window).resize();});此方法的好處就是不需要知道DIV的具體寬度和高度大小，直接用jQuery就可以實現水平和垂直置中，而且相容各瀏覽器，這個方法在很多的彈出層效果中應用。
寬度高度不固定的div 怎水平置中以及垂直置中
點評：從事頁面重構以來，由於經常遇見寬度不固定的div在水平或垂直置中的問題！總結下！留著以後用寬度高度不固定div的水平置中示範如下：水平置中代碼：html部分<div class="container">
<div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
<div style="clear:both"></div></div>css部分.container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
.center{display:inline-block;border:2px solid #fff;}
.center{_display:inline;} /*針對ie6 hack*/
.center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}
代碼要點：父容器container加css屬性 text-align:center;
子容器center加css屬性display:inline-block;
.center{_display:inline;} 為針對ie6的hack寬度高度不固定的div垂直置中示範如下：垂直置中代碼：html部分<div id="vc"><div id="vci"><div id="content">
我們垂直置中了，我們水平置中了
</div></div></div>css部分#vc { display:table; background-color:#C2300B; width:500px; height:200px; overflow:hidden; margin-left:50px; }
#vci { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; }
#content { color:#fff; border:1px solid #fff; display:inline-block; _position:relative; _top:-50%; _left:-50%; }
代碼要點：父容器vc的css屬性 display:table;overflow:hidden;
子容器vci的css屬性 vertical-align:middle;display:table-cell;
針對ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position......餘下全文>>
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
