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;

应用这一点的演示见

div层竖直居中：

position: relative;top:50%;margin-top: -150px;     /* 为 1/2的height */