让DIV垂直居中的几种办法
1.使用CSS3 的伸缩盒布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#container {
height: 400px;
width: 100%;
background-color: gray; display:-webkit-flex;
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
#container > div{
height: 200px;
width: 200px;
background-color: red; }
</style>
</head> <body>
<div id="container">
<div></div>
</div>
</body>
</html>
2.position:absolute 和 margin 联合使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#container {
height: 400px;
width: 100%;
background-color: gray; position: relative;
}
#container > div{
height: 200px;
width: 200px;
background-color: red; position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head> <body>
<div id="container">
<div></div>
</div>
</body>
</html>
3.position:absolute 和 margin: auto联合使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#container {
height: 400px;
width: 100%;
background-color: gray; position: relative;
}
#container > div{
height: 200px;
width: 200px;
background-color: red; position: absolute;
top:;
bottom:;
left:;
right:;
margin: auto;
}
</style>
</head> <body>
<div id="container">
<div></div>
</div>
</body>
</html>
4.position:absolute和translate的联合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body {
height: 100%;
margin: 0;
padding: 0;
}
div {
position: absolute;
left: 50%;
top: 50%;
background-color: red;
transform: translate(-50%,-50%);
font-size: 440px;
}
</style>
</head>
<body>
<div>W</div>
</body>
</html>
5.让div inline-block化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
div {
display: inline-block;
background-color: red;
font-size: 440px;
vertical-align: middle;
}
i {
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div>W</div><i></i>
</body>
</html>
让DIV垂直居中的几种办法的更多相关文章
- div垂直居中的几种方法
CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法[转]
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...
- 让div垂直居中的5种方法
方法一: 这个方法把 div 的显示方式设置为表格,然后我们可以使用表格的 vertical-align property 属性. HTML & CSS: <div class=&quo ...
- 让div盒子相对父盒子垂直居中的几种方法
div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- 如何让一个div里面的div垂直居中？
如何让一个div里面的div垂直居中? 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间.上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3 ...
随机推荐
- jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类: 1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...
- HttpWebRequest多线程抓取17Track的物流信息
公司的一个系统需要去抓17Track的物流信息,贴上代码有需要的朋友可以参考一下↓ //17Track的抓取地址以及开启的线程数量 <add key="url" value= ...
- 关于.net根目录路径的问题
今天做了一个项目,用了url重写,但是在本地目录是localhost/BK/index.aspx,而其他目录也必须带bk,不带的话就找不到页面,(iis里正常) 应该主目录去掉bk,设置方法,右击网站 ...
- winform 获取当前项目所在的路径
代码: string curAppPath = System.IO.Directory.GetParent(System.Environment.CurrentDirectory).Parent.Fu ...
- Linux最小化安装后配置网络
vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0HWADDR=00:0C:29:DD:AD:B9TYPE=EthernetUUID=d7 ...
- 使用证书部署出现System.Security.Cryptography.CryptographicException 错误解决方案
一.System.Security.Cryptography.CryptographicException: 找不到对象 at System.Security.Cryptography.Cryptog ...
- 用ThreadLocal管理事务
1.适用场景 一个service,操作两个dao,要求两个dao为同一个事务,要么全成功,要么全失败.
- uva 11038 - How Many O's?
想法: 將問題簡化為求1~m 0的總數,以及1~n 0的總數,然後最後再相減. 求1~n 0的總數,要將n分別算每個位數0的個數,舉例如30324: 先從右邊第一位'4'開始,其左邊為3032,表示1 ...
- C# 调用浏览器打开网址
private void button1_Click(object sender, EventArgs e) { //调用系统默认的浏览器 System.Diagnostics.Process.Sta ...
- ORACLE主要的系统表和系统视图
ORACLE主要的系统表和系统视图 1.系统表 ORACLE数据库的系统参数都存储在数据库中,可以通过SQLPLUS,以用户SYS进行查询.几个重要的表或者视图如下: v$controlfile:控制 ...