让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 ...
随机推荐
- （三）一个工作任务引起的乱战——udp通信
先上代码.该代码是在问度娘的过程中搜到的,自己实验运行了下,可以使用(vs2010 net fram4.0).服务端代码: using System;using System.Collections ...
- JAVA 泛型练习
二分查找: public class Q212 { public static void main(String [] args) { Integer []arr = {1,2,3,4,5,6,7,8 ...
- Java 图片设置圆角（设置边框，旁白）
/** * 图片设置圆角 * @param srcImage * @param radius * @param border * @param padding * @return * @throws ...
- IE浏览器下a标签嵌套img标签默认带有边框
最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!
- Cookie[1]
1.什么是Cookie Cookie是一小段文本类型的数据,由服务器发送,并保留在客户端的计算机上. 2.Cookie的作用 服务器可以利用Cookie包含的信息来筛选并经常维护这些信息,以判断在Ht ...
- java下DataInputStream与DataOutputStream写入数据的同时写入数据类型
package cn.stat.p2.demo; import java.io.DataInputStream; import java.io.DataOutputStream; import jav ...
- （原）torch中微调某层参数
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6221664.html 参考网址: https://github.com/torch/nn/issues ...
- PHP数组相加
+ 运算符把右边的数组元素(除去键值与左边的数组元素相同的那些元素)附加到左边的数组后面,但是重复的键值不会被覆盖 ,array_merge()此时会覆盖掉前面相同键名的值 如: $a=array(' ...
- Java学习笔记--String StringBuffer StringBuilder
String StringBuffer StringBuilder String http://docs.oracle.com/javase/7/docs/api/ 中文: http://www.cn ...
- bindingredirect 没有效果
在搞在线聊天室的时候用到了SignalR 1.1.4,依赖于Newtonsoft.Json 4.5.0.0. 而我另外的dll又依赖Newtonsoft.Json 6.0.0.0 我只引用6.0.0. ...