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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

CSS居中:完全指南(译)

CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢?但是我认为这个问题其实并没有那么难啦,就是有很多种不同的方式可以达到居中的目的,这取决于不同的情景...

3267
来自专栏Python

css样式—字体垂直、水平居中

<div class="tt">啦啦啦</div> .tt{ padding: 0px; width:500px...

24210
来自专栏james大数据架构

LinearLayout(线性布局)

要点: android:orientation="vertical"垂直线性布局,"horizontal"水平线性布局 android:gravity="top...

2199
来自专栏用户2442861的专栏

CSS基础-引入方法,选择器,继承

    例子:<div style="background-color:red">行内式</div>

871
来自专栏企鹅号快讯

前端学习自学笔记:day09

今天是第九天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第九天的笔记:HTML AND CSS: -复...

1816
来自专栏张俊红

网页的修饰

总第61篇 上一篇推送了网页的基本构成,链接地址:网页是怎么构成的?,这篇来讲讲网页的修饰,正如字面意思一般,本篇分享的内容是用来修饰网页的,是让网页变得更加好...

3897
来自专栏Sublime

几种水平垂直居中的方法

1550
来自专栏电光石火

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

1、利用绝对定位,一个居中的模型 #login { /* 定义一个ID选择器 */ width:300px;...

2088
来自专栏Sorrower的专栏

界面无小事(五):自定义TextView

1123
来自专栏九彩拼盘的叨叨叨

前端学习 第2周 第1天

822

扫码关注云+社区

领取腾讯云代金券