1、利用绝对定位，一个居中的模型
#login { /* 定义一个ID选择器 */
width:300px; /* 定义盒子宽度为300px */
height:200px; /* 定义盒子高度为200px */
position:absolute; /* 使用绝对位置进行定位 */
left:50%; /* 左部盒子开始位置是页面宽度的50% */
top:50%; /* 顶部盒子开始位置是页面高度的50% */
margin-left:-150px; /* 左部开始位置再退回盒子宽度的一半 */
margin-top:-100px; /* 顶部开始位置再退回盒子高度的一半 */
background:#BABABA; /* 定义盒子的背景颜色为灰色 */
}
2、盒子水平居中设计2
body { /* 为网页主体内容区域设置样式 */
margin:0; /* 设定网页外部边距值为0，消除body默认值 */
padding:0; /* 设定网页内部边距值为0，消除body默认值 */
text-align:center; /* 为了在IE中设置主体容器盒子居中 */
}
#container { /* 为布局的最外层容器使用ID选择器设置样式 */
width:966px; /* 设置最外层容器宽度为966px */
margin:0 auto; /* 设置外边距上下为0，左右自动，则在FF中居中 */
text-align:left; /* 再将主容器中的文本内容调回为居左显示 */
background:#888; /* 临时设置一下背景颜色显示主容器布局效果 */
height:800px; /* 也是临时设置一下高度显示主容器的布局效果 */
}
3、竖直居中：
文字水平，竖直居中：
水平居中：text-align: center;
竖直居中：line-height: 30px（30为层高）
应用这一点的演示见CSS导航栏（仿W3School）
div层竖直居中：
position: relative; top:50%; margin-top: -150px; /* 为 1/2的height */
