实现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 ...
随机推荐
- Tile based Rendering //后面一段是手机优化建议
https://www.imgtec.com/blog/a-look-at-the-powervr-graphics-architecture-tile-based-rendering/ 一种硬件结构 ...
- svn取消文件夹关联的方法(svn取消关联)
新建个记事本,贴入以下代码,保存后重命名后缀为reg,然后在目标文件夹右键就出现了删除SVN的选项了. 复制代码 代码如下: Windows Registry Editor Version 5.00[ ...
- 配置到 Framework GAC（Global Assembly Cache） Assembly
配置到 Framework 通常有两种方法,一种是直接把它放到GAC(Global Assembly Cache作用是可以存放一些有很多程序都要用到的公共Assembly)中 :另一种是把它们放到具体 ...
- 在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome
在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome #identifier-pannel { bottom: 345px; margin-left: 512px; pos ...
- Cat安装
1,windows7+jdk1.7(1.7,1.6都可以,1.8不行)+maven3.3.3 2,到github上下载cat源码 https://github.com/dianping/cat 例如下 ...
- Lina Group
var query = from ll in proListRequestList group ll by new {ll.pro_id} into g select new ProListReque ...
- js中，{}初始化数据类型object；for in 的用法；delete的用法
var choices = {}; //此数据表示的是:object{} for(var i=0;i<10;i++){ choices[i+1] = [data[i].testPlan,test ...
- js数组高阶方法reduce经典用法代码分享
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
- Android秒级编译工具Freeline
Freeline 是 Android 平台上的秒级编译方案,Instant Run 的替代品,由蚂蚁聚宝Android 团队开发,它可以充分利用缓存文件,在几秒钟内迅速地对代码的改动进行编译并部署到设 ...
- NoSQL的CURD结构体的定义
NoSQL的CURD结构体的定义 flyfish 2015-7-23 參考MongoDB Wire Protocol 在这里document部分使用json表示 使用boost::property_ ...