DIV垂直水平居中
方法一:使用定位的方法
.parent {
width: 300px;
height: 200px;
border: 1px solid red;
position:relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid violet;
position:absolute;
top: 50%;
left:50%;
margin-top: -50px; /*这里是小盒子高的一半*/
margin-left: -50px; /*这里是小盒子宽的一半*/
}
使用定位方法,需要知道子元素的宽高,但是不需要知道父元素的宽高.1
方法二:利用定位及margin:auto实现 (实现原理是设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中;)
.parent {
width: 300px;
height: 200px;
border: 1px solid red;
position:relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid violet;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
DIV垂直水平居中的更多相关文章
- div垂直水平居中的四种方法总结
5.利用弹性布局 与 margin: <style> .container{ height: 600px; width: 600px; border:1px solid black; di ...
- css中设置div垂直水平居中的方法
设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...
- DIV垂直/水平居中2(DIV宽度和高度是动态的)
<!doctype html><html><head><meta charset="utf-8"><title>块元素D ...
- 怎么让一个不定宽高的div垂直水平居中?
方法一:使用CSS3 transform 父盒子设置:position:relative; div设置:position:absolute;transform:translate(-50%,-50%) ...
- 【CSS基础】实现 div 里的内容垂直水平居中
方案一: 所有内容垂直水平居中 兼容性:IE8+. 条件:内容宽度和高度可以未知,可以是多行文字.图片.div. 描述:使用table-cell + vertical-align , html代码见文 ...
- css实现div不定宽高垂直水平居中解决方案
在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...
- div中单行文字垂直水平居中
1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- 关于用css实现文本和图片垂直水平居中
关于用css实现文本和图片垂直水平居中 一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...
随机推荐
- 开发的第一个PHP扩展
下载php源码php-5.4.23.tar.gz,解压,进入/home/hubo/php-5.4.23/ext/扩展目录 wget http://cn2.php.net/get/php-5.4.23. ...
- 设置ubuntu默认输入python进入python3
执行下面两条命令 sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo update- ...
- Data Structure Binary Tree: Check for Children Sum Property in a Binary Tree
http://www.geeksforgeeks.org/check-for-children-sum-property-in-a-binary-tree/ #include <iostream ...
- (1)Java多线程编程核心——Java多线程技能
1.为什么要使用多线程?多线程的优点? 提高CPU的利用率 2.什么是多线程? 3.Java实现多线程编程的两种方式? a.继承Thread类 public class MyThread01 exte ...
- HDU 4336 Card Collector:状压 + 期望dp
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4336 题意: 有n种卡片(n <= 20). 对于每一包方便面,里面有卡片i的概率为p[i],可 ...
- 分享知识-快乐自己:Hibernate 中的 HQL 语句的实际应用
概要: Hibernate 支持三种查询方式: HQL查询.Criteria查询及原声 SQL (Native SQL)查询. HQL(Hibernate Query Language,Hiberna ...
- matplotlib中文显示-微软雅黑
网上有很多方法,但是基本的是片面的. 参考1 https://tracholar.github.io/wiki/python/matplotlib-chinese-font.html 参考2 http ...
- BaseAdapter/AsyncTask/..等等细节
BaseAdapter中的getCount之类的函数,是在constructor之后才启动的.这印证了构造函数的优先级是max的. 图片 这一点的意义在于,当你想给getCount返回一个具体参数的时 ...
- Android Studio的技巧
1.快速添加add unimplements methods: 右键generate 2.快速添加try-catch:左边就有一个小电灯,然后可以选. 3.格式化OPTION + CMD + L ( ...
- BZOJ-4819: 新生舞会(01分数规划+费用流)
Description 学校组织了一次新生舞会,Cathy作为经验丰富的老学姐,负责为同学们安排舞伴.有n个男生和n个女生参加舞会 买一个男生和一个女生一起跳舞,互为舞伴.Cathy收集了这些同学之间 ...