实现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 ...
随机推荐
- 从外部重置一个运行中consumer group的消费进度
对于0.10.1以上版本的kafka, 如何从外部重置一个运行中的consumer group的进度呢?比如有一个控制台,可以主动重置任意消费组的消费进度重置到12小时之前, 而用户的程序可以保持运行 ...
- [转]Git branching and tagging best practices
Git branching and tagging best practices I am currently learning to use Git by reading Pro Git. Righ ...
- GDB+GdbServer: ARM程序调试
arm-linux-gdb+gdbserver环境搭建以及远程调试 GDB+GdbServer: ARM程序调试 嵌入式arm linux环境中gdb+gdbserver调试 建立交叉调试环境 编译过 ...
- 关于RecyclerView条目复用
前言 说下前几天遇到的一个小问题,关于RecyclerView条目选中状态的保存.众所周知,RecyclerView被创造出来用于条目的回收利用,但是,当前面回收的条目带有一些特殊的状态(区别于未选中 ...
- 一款实现浏览实事的资讯平台app
一款实现浏览实事的资讯平台app 如有转载,请注明出处:http://blog.csdn.net/u012301841/article/details/46687447 github链接:https: ...
- SQL中的重要语句
1.查询每个数据库有多少空间被浪费 如果你想知道在你数据库设计后,每页有多少空间浪费掉,你可 以通过下列动态管理视图(DMV)查询下缓冲池:sys.dm_os_buffer_descriptors 从 ...
- TCP/IP协议族-----21、文件传送：FTP和TFTP
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVrZXdhbmd6aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- Qt-优化布局结构
在迄今为止讲到每一个例子中,我们只是简单的把窗口部件放置到某个确定的布局中.但在某些情况下,由此形成的布局看起来可能还不是我们最想要的形式.在这些情形中,可以通过改变要摆放的窗口部件的大小策略和大小提 ...
- 自定义基于XML的验证器
a.编写一个类,继承FieldValidatorSupport类. b.在public void validate(Object object)编写你的验证逻辑 不符合要求的就向fieldErrors ...
- json servlet通信 显示数据
servlet //输出JSON格式的省份信息 @WebServlet("/ServletDemo1") public class ServletDemo1 extends Htt ...