在前端开发过程中，经常要对元素进行居中设置。一般有水平居中，和垂直居中。一般设置水平居中简单。基本是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();
});
