让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 ...
随机推荐
- Head First HTML与CSS — 布局与定位
1.流(flow)是浏览器在页面上摆放HTML元素所用的方法. 对于块元素,浏览器从上到下沿着元素流逐个显示所遇到的各个元素,会在每个块元素之间加一个换行: 对于内联元素,在水平方向会相互挨着,总体上 ...
- 使用Gird++打印出现“Retrieving the COM class factory for component with CLSID”的解决办法
我们的接口需要返回一个gird++生成PDF文件的二进制数据,在本地测试都很好,发布到服务器上一直出现“Retrieving the COM class factory for component w ...
- (转)WITH (NOLOCK)
缺点: 1.会产生脏读 2.只适用与select查询语句 优点: 1.有些文件说,加了WITH (NOLOCK)的SQL查询效率可以增加33%. 2.可以用于inner join 语句 脏读: 一个用 ...
- UI基础视图----UIView总结
UIView是UIKit框架里面最基础的视图类,是UIResponder的子类,是UIApplication和UIViewController的兄弟类,是UIWindow,UILabel,UIImag ...
- itext poi 学习之旅 （2）创建excel
Computer.java package com.qiang.poi; public class Computer { private int id; private String name; pr ...
- Centos6.5使用yum安装Mysql5.7
想要玩新的东东就要付出代价,我的时间悄悄的都溜走了,说多了都是泪! 实践才是真理! 系统版本:Linux localhost.localdomain 2.6.32-431.el6.x86_64 #1 ...
- sql语句各种九九乘法表
下面用while 和 if 条件写的SQL语句的四种九九乘法表 --9x9 左下角 ) BEGIN SET @S='' WHILE @J<=@I BEGIN )))))) END PRINT @ ...
- [Flask Security]当不能通过认证的时候制定跳转
Flask Security这个插件能对用户权限进行很好的控制. 通过三个model实现: User,存放用户数据 Role,存放角色数据 User_Role.存放用户角色信息 user_datast ...
- Linux_Shell符号及各种解释对照表
Shell符号及各种解释对照表: Shell符号 使用方法及说明 # 注释符号(Hashmark[Comments]) 1.在shell文件的行首,作为shebang标记,#!/bin/bash; 2 ...
- iOS知识点全梳理-备用
感谢大神分享 文/Jack_lin(简书作者)原文链接:http://www.jianshu.com/p/5d2163640e26著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 序言 ...