让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 ...
随机推荐
- C复习手记(Day1)
auto存储类:所有局部变量默认的存储类 ex:{int mount;auto int month} auto只用在函数内,只做局部变量 register 存储类:register 存储类用于定义 ...
- RAC 常用维护工具和命令(oracle 10g)
Oracle 的管理可以通过OEM或者命令行接口. Oracle Clusterware的命令集可以分为以下4种: 节点层:osnodes 网络层:oifcfg 集群层:crsctl, ocrchec ...
- 关于Xcode7的HTTP请求不到网络的问题
---恢复内容开始--- Xcode7发现网络请求失败, 其他一切都可以, 有网就是提示没有网络, 请求不到, 查询得知 iOS9引入了新特性 APP Transport Security (ATS: ...
- js 当前系统时间
<script language=Javascript> function time(){ //获得显示时间的div t_div = document.getElementById('sh ...
- haslayout引起的IE6 :hover失效
大家都知道IE6之支持<a>标签的:hover为了,但是通常在做实际效果的时候<a>标签 :hover在IE6下会失效, 看代码: [code="html" ...
- pyzmq简单的在线聊天室
#encoding=utf-8#客户端 import zmq c = zmq.Context() s = c.socket(zmq.REQ) s.connect('tcp://127.0.0.1:10 ...
- http://www.cnblogs.com/zhuli19901106/p/4356419.html
http://www.cnblogs.com/zhuli19901106/p/4356419.html
- mongoDB初探
最近在努力学习node方面的东西,看别人的资料里提到最多用到的数据库还是mongoDB,早打算下载下来试一下,由于电脑新配置,网络也由于住的地方现在上不了网暂时用的手机4G网络在凑合,这里面也踩到了不 ...
- MVC几个系统常用的Filter过滤器
1.AcceptVerbs 规定页面的访问形式,如 [AcceptVerbs(HttpVerbs.Post)] public ActionResult Example(){ return View() ...
- 用Nginx实现Session共享的均衡负载
前言 大学三年多,也做个几个网站和APP后端,老是被人问到,如果用户多了服务器会不会挂,总是很尴尬的回答:“哈哈,我们的用户还少,到了服务器撑不住的时候,估计都上市了吧”.说是这么说,但是对于有强迫症 ...