网页内元素水平垂直居中
这两天研究所extJs，要写一个登录页面，网上搜了一些相关的解决办法，但是要和extJs一起使用都不很理想，自己就写了一种解决方案。
主要就是利用vertical-align属性，将其设置为middle，并把元素放到table里面。
代码如下：
<html>
<body>
<body>
<table id="mainTable" border="0" style="vertical-align:middle; text-align:center" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td>
<div id="divLogin">
用户名：<input type='text' name="username">
<br/>
密 码：<input type='text' name="password">
<br/>
<input type='submit' name="login" value='登录'>
<input type='button' name="cancel" value='取消'>
</div>
</td>
</tr>
</table>
</body>
</html>
但是，和ExtJs一起使用的时候，会出现
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebUI.Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<table id="mainTable" border="0" style="vertical-align:middle; text-align:center" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td> <div id="divLogin"></div></td>
</tr>
</table>
</body>
</html>
但是并没有垂直居中，检查发现删除
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这一句之后就行了，很是纳闷。
或者在页面加载的时候，重新给table设置高度就行了。在页面中添加如下代码也可以。
<script>
window.onload=function(){
var h= window.screen.availHeight-100;
document.getElementById("mainTable").setAttribute("height",h+"px");
};
</script>
----------------------------------------------------------------------------------------------------------------------------------------------
关于下面一句话：DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
还有可能，我们编写的页面不符合W3C标准，所以会没有垂直居中。
关于document type的解释，请看下面的连接。
