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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券