Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS几个竖直与水平居中盒子模型

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

作者头像
似水的流年
发布于 2019-12-06 06:21:41
发布于 2019-12-06 06:21:41
58200
代码可运行
举报
文章被收录于专栏:电光石火电光石火
运行总次数:0
代码可运行

1、利用绝对定位,一个居中的模型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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、竖直居中:

文字水平,竖直居中:

水平居中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
text-align: center;

竖直居中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
line-height: 30px

(30为层高)

应用这一点的演示见CSS导航栏(仿W3School)

div层竖直居中:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
position: relative;
top:50%;
margin-top: -150px;     /* 为 1/2的height */
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-04-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
CSS盒子模型
网页的布局本质就是把网页的元素(图片,文字都)都放入盒子里面,然后按照自己的需要摆放盒子的过程就是网页布局。
羊羽shine
2019/06/24
8170
CSS盒子模型
大型编程电视剧连载 | CSS知识点硬核整理归纳(二)
网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
上分如喝水
2021/08/16
2K0
大型编程电视剧连载 | CSS知识点硬核整理归纳(二)
前端成神之路-盒子模型
网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
海仔
2020/11/12
1.1K0
前端成神之路-盒子模型
css3盒子模型最详解
box-sizing <html lang="en"> <head> <meta charset="UTF-8"> <title>51-盒子box-sizing属性</title> <style> .content{ width: 300px; height: 300px; background-color: red; } .aside{ w
贵哥的编程之路
2020/11/03
4800
css3盒子模型最详解
【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★
HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ;
韩曙亮
2024/03/12
6370
【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★
【CSS】CSS三大特性、盒子模型
​相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。
P_M_P
2024/04/12
2990
【CSS】CSS三大特性、盒子模型
WEB入门.六 盒子模型
上一章节中已经讲解了页面布局的基础知识,了解了设计一个标准的 XHTML页面需要遵循的规范,例如:标签需要关闭、使用 id 属性代替 name 属性、属性值需要使用双引号等。另外,上一章内容讲解了 XHTML 基本标签的用法。
张哥编程
2024/12/17
1440
WEB入门.六  盒子模型
Day5:html和css
如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义。然后数值为auto即可。
达达前端
2019/07/03
9690
水平居中和垂直居中
本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</title> <meta charset="utf-8"> </head> <style type="text/css"> .box { /* 在一个基础的盒子里面显示效果 */ position: relative; float: left; width: 250px; h
echobingo
2018/04/25
3.1K0
水平居中和垂直居中
CSS重要的盒子模型
新浪导航栏的核心就是因为里面的字数不一样多,所以我们不方便给宽度,还是给padding ,撑开盒子的。
乐心湖
2020/07/31
1.1K0
CSS重要的盒子模型
【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )
然后 , 左侧广告栏高度为 300 像素 , 顶部在中线位置 , 向上移动 150 像素即可使真个广告栏居中设置 ;
韩曙亮
2023/04/16
3.5K0
【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )
前端常用布局方案总结
若元素为行内块级元素,可以通过为其父元素设置text-align: center 实现水平居中。
越陌度阡
2022/05/06
2.9K0
前端常用布局方案总结
【CSS】课程网站 网格商品展示 模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )
文本所在盒子 , 与 顶部的导航栏有 15 像素间隔 , 这里使用 上外边距 设置 ;
韩曙亮
2023/04/06
4.8K0
【CSS】课程网站 网格商品展示 模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )
CSS盒子模型
边框的每一条边都能定义样式( border-top / bottom / left / right )
小丞同学
2021/08/16
8510
CSS 入门指南(二):盒模型 & 浮动弹性布局 & CSS 特性
这个盒子由这几个部分构成 : 边框 border、 内容 content、 内边距 padding、 外边距 margin
IsLand1314
2025/03/30
2600
CSS 入门指南(二):盒模型 & 浮动弹性布局 & CSS 特性
CSS基础
CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 '''         selector {                   property: value;                   property: value;              ...  property: value                     }           ''' 例如: 1 h1 {color:red; font-size:14px
用户1214487
2018/01/24
2.2K0
CSS基础
CSS基础学习(3)
static遵循默认的文档流布局,top,left,right,bottom,属性都无效
爱学习的小超人
2022/11/14
7530
盒子模型(CSS重点)
其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。
星辰_大海
2020/09/30
1.7K0
CSS布局(二) 盒子模型属性
盒子模型的属性 宽高width/height   在CSS中,可以对任何块级元素设置显式高度。   如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样;   如果指定高度小于显示内容所需高度,取决于overflow属性,需要滚动条需要设置为overflow:auto。 auto   宽高和margin可以设置auto。对于块级元素来说,宽度设置为auto,则会尽可能的宽。详细来说,元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距;   高度设置为a
柴小智
2018/04/10
2.1K0
CSS布局(二) 盒子模型属性
【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )
课程表 在 版心的右侧 , 可以设置成 右浮动 , 设置一个 50 像素的 外上边距 ;
韩曙亮
2023/04/06
4K0
【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )
相关推荐
CSS盒子模型
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验