div+css 怎么让一个小div在另一个大div里面 垂直居中
div+css 怎么让一个小div在另一个大div里面 垂直居中
方法1：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:200px;
height:200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: red;
}
|
方法2：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child {
width:200px;
height:200px;
display:inline-block;
background-color: red;
}
|
方法3：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:flex;
justify-content:center;
align-items:center;
}
.child {
width:200px;
height:200px;
background-color: red;
}
|
方法4：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:300px;
height:200px;
margin:auto;
position:absolute;/*设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小*/
left:50%;
top:50%;
margin-left: -150px;
margin-top:-100px;
background-color: red;
}
|
转载于:https://www.cnblogs.com/as3lib/p/6747722.html
div+css 怎么让一个小div在另一个大div里面 垂直居中相关推荐
- 25条div+CSS编程提醒及小技巧整理
1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...
- python设计一个小游戏、定义一个top score_python实现滑雪者小游戏
引言 这是一个用pygame写的滑雪者的游戏. skier从上向下滑,途中会遇到树和旗子,捡起一个旗子得10分,碰到一颗树扣100分,可以用左右箭头控制skier方向. 安装pygame pip in ...
- 开源一个小工具，是一个封装的数据查询小框架
框架是基于jdbcutil的二次封装,支持事务,可以在多数据源上来回切换,极其方便,配置简单,支持spring中引用,使用方式参考↓ http://www.fuchenglei.com/2018/11 ...
- 一个小故事带你了解大O表示法
☀前言:我们再编写程序时,不同的人有不同的思路,算法.那么如果需要比较谁的代码更好,使用哪种算法效率更高,我们一般会从代码程序的速率和所占空间去考虑.这时我们就需要使用一种方法描述程序运行的时间复杂度 ...
- html首行缩进在CSS中的代码,如何在div+css实现首行缩进
用word文档实现段落首行缩进是一件相当容易的事,你只需打开段落对话框,在里面进行相关设置即可.那么在div+css中该如何实现呢?今天我们一起来学习一下. 所谓首行缩进,就是每段前空两个汉字.所以在 ...
- css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- div + css 详解
第 1 页 <Div+CSS 布局大全> 整理者:Jesse Zhao 网站:http://JesseZhao.cnblogs.com 送给我最爱的女朋友蜜蜜,希望她可以永远快乐幸福!!! ...
- 陈力：传智播客古代 珍宝币 泡泡龙游戏开发第八讲：DIV+CSS中类选择器、id选择器和html选择器介绍
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第八讲:DIV+CSS中类选择器.id选择器和html选择器介绍 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第七讲:DIV+CSS入门.在贵阳网站建设中,经常 ...
- DIV+CSS到底是什么?
DIV+CSS到底是什么? 我想肯定有很多朋友搞不明白,其实我也未必明白,不过我还是想把自己的理解写出来,或许可以帮助那些想学,或者开始学不知道如何入门的朋友们. 我们平时在设计网页时,一般是使用Ta ...
- DIV CSS display (block none inline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
最新文章
- 开机遇到grub解决方法，超详细
- 多线程存数据mysql_java 多线程存储数据库
- python精要（65）－类（2）-构造函数
- 作为一名通信老司机，我是如何看待翼龙通信无人机救灾的？
- linux 调优系列
- 抽卡时下拉通知栏导致icon丢失
- python精确运算_Python:执行精确的浮点数运算
- 谁说贾跃亭不还钱？人家已偿还超30亿美元的国内债务
- TCP/IP：TCP SYN Flood攻击原理与实现
- Python删除重复字符串
- .NET Core 中 IOptions 有什么用
- bzoj 1488: [HNOI2009]图的同构
- java实现非对称加密算法
- 2017电子设计大赛论文：滚球控制系统
- Foxit Quick PDF Library License Key
- 阿里副总裁玄难：藏经阁计划研发大规模知识构建技术首次披露
- 看看这模型！“桥梁建设国家队”是如何用CC来三维建模的？
- 30分钟java桌球小游戏,30分钟完成桌球小游戏项目
- Golang之上下文Context
- 使用系统打印服务器配置,打印服务器配置教程.pdf