实现DIV居中的几种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
</style> <div class="div1">
<div class="div2"> </div>
</div> </body>
</html>
如上的两个div，实现div2在div1里面是居中显示
一、方法一
利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30
div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;} .div22{
margin-left: 30px;margin-top: 30px;
}
</style> <div class="div1">
<div class="div2 div22"> </div>
</div> </body>
</html>
二、方法二
利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，css如下设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;} .div11{
position: relative;
}
.div22{
position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
}
</style> <div class="div1 div11">
<div class="div2 div22"> </div>
</div> </body>
</html>
三、方法三
还是用css的position属性，如下的html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;} .div11{
position: relative;
}
.div22{
position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style> <div class="div1 div11">
<div class="div2 div22"> </div>
</div> </body>
</html>
四、方法四
利用css3的新增属性table-cell
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;} .div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
</style> <div class="div1 div11">
<div class="div2 div22">
</div>
</div> </body>
</html>
这个方法还有一个好处就是，div2的高度可以不固定，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; background-color: green;} .div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
</style> <div class="div1 div11">
<div class="div2 div22">
div居中方法
</div>
</div> </body>
</html>
实现DIV居中的几种方法的更多相关文章
- div居中的三种方法
方法1: #div1{ width:200px; height:200px; background:green; position:absolute; left:0; top:0; right:0; ...
- DIV居中的几种方法
1. body{ text-align:center; } 缺点:body内所有内容一并居中 2. .center{ position: fixed; left: 50%; } 缺点:需要设置posi ...
- div居中的几种方式
摘自:https://www.cnblogs.com/ones/p/4362531.html DIV居中的几种方法 1. 1 body{ 2 text-align:center; 3 } 缺点:b ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div垂直居中的几种方法
CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
- CSS教程:div垂直居中的N种方法[转]
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- Qt中的布局浅析与弹簧的使用，以及Qt居中的两种方法
1. 布局 为什么要布局: 布局之后窗口的排列是有序的 布局之后窗口的大小发生变化, 控件的大小也会对应变化 如果不对控件布局, 窗口显示出来之后有些控件的看不到的 布局是可以嵌套使用 常用的布局方式 ...
- 让一个图片在div中居中（四种方法）
第一种方法: <div class="title"> <div class="flag"></div> <div cl ...
- 《Web开发中让盒子居中的几种方法》
一.记录下几种盒子居中的方法: 1.0.margin固定宽高居中: 2.0.负margin居中: 3.0.绝对定位居中: 4.0.table-cell居中: 5.0.flex居中: 6.0.trans ...
随机推荐
- 配置Yum源repo文件及搭建本地Yum服务器
分享一篇配置Yum源repo文件及搭建本地Yum服务器的方法,希望对大家有用. Yum源的话有三大类: Base Extra Epel Base:就是你下载的光盘镜像里面的DVD1Extra:就是你下 ...
- http://www.blogjava.net/crespochen/archive/2011/04/22/348819.html
http://blog.csdn.net/supersky07/article/details/7407523 http://blog.csdn.net/cuker919/article/detail ...
- Android 自定义数字加减器
该自定义View主要是实现一款效果不错的数字加减器的功能的,但是也可以自定义选择器的外观颜色等. 1.自定义View的布局(add_sub_view.xml) <?xml version=&qu ...
- Python strings, 元组tuples, 和numbers是不可更改的对象，而list,dict等则是可以修改的
在python中,strings, 元组tuples, 和numbers是不可更改的对象,而list,dict等则是可以修改的对象. a = 1 def fun(a): a = 2 fun(a ...
- iOS多线程之NSOperation和NSOperationQueue的使用
一:NSOperation 两个子类+重写main方法 NSInvocationOperation NSBlockOperation 有个类方法 BlockOprationWith: 还有就是自己个子 ...
- thinkphp 表名 大小写 窍门
我们有一个表auth_group_access,那么如何使用呢?在使用M方法时,对于带下划线的表名,可以采用如下方法. M('AuthGroupAccess');对应sql语句SQL: SHOW CO ...
- es6 对象简化写法-函数
表达式还可以用于定义方法名. let obj = { ['h' + 'ello']() { return 'hi'; } }; obj.hello() // hi
- canvas光晕
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 2、jQuery选择器
2.1 基本选择器 它有元素Id.Class.元素名.多个选择符组成,通过基本选择器可以实现大多数页面元素的查找. 选择器 功能 返回值 #id 根据给定的ID匹配一个元素 单个元素 element ...
- mysql处理大数据合并的另一种方法
在做项目的时候我碰到了一个这样的场景,有两张表,数据都在300W左右,现在要求在生产环境中合并这两张表为一张表,本来想用sql语句insert into select来实现,后来发现这样操作速度很慢, ...