CSS几个竖直与水平居中盒子模型

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 */