实现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 ...
随机推荐
- javascript上传多张图片并预览
直接上代码 html代码 <div> <label>封面</label> <input type="file" id="cove ...
- 云计算之路-阿里云上：启用Windows虚拟内存引发的CPU 100%故障
今天上午11:35~11:40左右,由于负载均衡中的两台云服务器CPU占用突然飚至100%,造成网站5分钟左右不能正常访问,请大家带来了麻烦,请谅解! (上图中红色曲线表示CPU占用) 经过分析,我们 ...
- 利用jspx解决jsp后缀被限制拿shell
有些struts2的站在web.xml里面设置url是jsp的格式就自动跳转主页的action,转换jsp后缀大小写还不解析.查了查有Tomcat默认jspx可以解析.看了看jspx的手册,那就好说了 ...
- VLC播放RTSP视频延迟问题
VLC播放RTSP视频延迟问题 配置 VLC 以播放 RTSP/RTP 流 实测发现RTP都不如TCP快? vlc播放rtp封装的h.264延时很大是什么原因? 开启打印: VLC的工具->消息 ...
- python中的socket服务器（多线程）
最近在写一个客户端和服务器的项目,使用了SocketServer模块,网上大多数都是TCP连接的例子,我在这总结一个UDP. 直接贴上代码 import threadingimport SocketS ...
- Sun公司开源游戏服务器
http://www.360doc.com/content/11/0307/12/2902158_98866885.shtml http://www.cnblogs.com/daidu/archive ...
- WebDriver API——第3部分Action Chains
The ActionChains implementation, class selenium.webdriver.common.action_chains.ActionChains(driver) ...
- Getting started with Chrome Dev Editor
转自:https://github.com/GoogleChrome/chromedeveditor/blob/master/doc/GettingStarted.md Installation In ...
- 解决在开发环境中访问json配置文件时报HTTP 错误 404.3 - Not Found
问题描述: 在做demo时,使用json文件做配置文件,访问时,http状态提示:404.3错误,经验证json确认存在,路径也没有问题, 在浏览器地址栏里直接访问json时也提示同样的错误, 根据错 ...
- nodejs express route 的用法
express 中文社区:http://expressjs.jser.us/community.html nodejs express route 的用法 1. 首先是最基本的用法. 1 2 3 4 ...