在前端開發過程中，經常要對元素進行居中設置。一般有水平居中，和垂直居中。一般設置水平居中簡單。基本是margin:0 auto，就可以了。但是垂直居中，我們有時會覺得使用vertical-align,但是這個屬性對div元素不起作用。
目前通用的解決辦法是，使用絕對定位，然后設置left和top為50%。然后通過margin來設置。下面具體代碼演示了一個簡單的登錄頁面，然后使登錄界面水平居中和垂直居中。代碼如下：
<html> <head> <title>div元素水平和垂直居中</title> <style type="text/css"> #login-container { width:400px; height:350px; background-color:#ddd; text-align:center; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px; } #login-container .login-title { padding-top:50px; } </style> </head> <body> <div id="login-container"> <h3 class="login-title">用戶登錄</h3> <div>用戶名:<input type="text" value=""/></div> <div>密 碼:<input type="text" value=""/></div> </div> </body> </html>
截圖如下：
使用Chrome、Firefox和IE9以上瀏覽器中，改變瀏覽器的大小，div元素還是會垂直居中。所有不需要額外寫JavaScript代碼進行定位。后續會寫到另外一個問題：在一個div中，不固定高度的圖片如何垂直居中。另外jQuery UI的Dialog控件有一個bug就是，頁面太長了，往下拉滾動條時，overlay的高度不能自動延伸。這里需要寫代碼進行控制，在全局js文件中，添加下面代碼：
//hotfix.修正overlay在窗口發生onresize時，不調整位置 function update_widget_overlay_height() { var height = $(window).height() + $(window).scrollTop(); $(".ui-widget-overlay").css({ "height": height }); } $(window).scroll(function () { update_widget_overlay_height(); });