如何让div水平垂直居中
引子
我们经常遇到需要把div中的内容进行水平和垂直居中。所以，这里介绍一种方法，可以使div水平居中和垂直居中。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div水平垂直居中</title>
<style>
*{
margin:0;
padding:0;
}
div.box{
background-color:pink;
border:2px solid #000;
width:960px;
height:500px;
margin-left:50px;
}
</style>
</head>
<body>
<div class="box">
<img src="girl.jpg" alt="美女">
</div>
</body>
</html>效果图：
现在先让图片在div中水平居中
我们可以先给图片套一层盒子。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div水平垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div.container{
background-color:pink;
border:2px solid #000;
width:500px;
height:500px;
margin:50px auto;
display:table;
}
div.wrapper{
text-align:center;
display:table-cell;
vertical-align:middle;
}
div.wrapper img{
border:1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<img src="girl.jpg" alt="美女"/>
</div>
</div>
</body>
</html>IE8/Firefox/Chrome/Safari/Opera页面效果：
IE6/IE7页面效果：
由此可见要做IE6/IE7的兼容：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div水平垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div.container{
background-color:pink;
border:2px solid #000;
width:500px;
height:500px;
margin:0 auto;
display:table;
margin-top:20px;
}
div.wrapper{
text-align:center;
display:table-cell;
vertical-align:middle;
}
div.wrapper img{
border:1px solid #ddd;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
div.container{
position:relative;
}
div.wrapper{
position:absolute;
left:50%;top:50%;
}
div.wrapper img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="wrapper">
<img src="girl.jpg" alt="美女"/>
</div>
</div>
</body>
</html>IE6/IE7效果图：
综上所述，要让div里面的内容水平居中，可以使用text-align:center;
要实现垂直居中，container 的display:table;而wrapper的display:table-cell;同时vertical-align:middle;就可以实现div里的图片水平垂直居中。
假如是多张图片，要实现居中：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div水平垂直居中</title>
<style>
*{
margin:0;
padding:0;
}
div.container{
background-color:pink;
border:2px solid #000;
width:700px;
height:500px;
margin:0 auto;
margin-top:50px;
}
div.wrapper{
text-align:center;
margin-top:28px;
}
div.wrapper img{
border:1px solid #ddd;
width:200px;
margin:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<img src="girl3.jpg" alt="美女"/>
<img src="girl3.jpg" alt="美女"/>
<img src="girl3.jpg" alt="美女"/>
<img src="girl3.jpg" alt="美女"/>
<img src="girl3.jpg" alt="美女"/>
<img src="girl3.jpg" alt="美女"/>
</div>
</div>
</body>
</html>IE6/IE7/IE8/Firefox/Chrome/Safari/Opera页面效果：
div.wrapper中的text-align:center;实现水平居中，margin-top:28px;实现垂直居中。
28px=[500-(200+1+1+10+10)*2]/2，即外层的高度减去里面的高度，然后除以2，设置margin-top,即可居中。
假如有错误或者建议的地方，欢迎指正!-----妙瞳
如何让div水平垂直居中的更多相关文章
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- DIV水平垂直居中的CSS兼容写法
DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...
- Div水平垂直居中的三种方法
百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...
- scss : div水平垂直居中
scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
- 【html】【10】div布局[div水平垂直居中]
必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- 如何将一个div水平垂直居中？4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
随机推荐
- 使用 VisualVM 进行性能分析及调优
VisualVM 是一款免费的性能分析工具.它通过 jvmstat.JMX.SA(Serviceability Agent)以及 Attach API 等多种方式从程序运行时获得实时数据,从而进行动态 ...
- BZOJ 3260 跳
YY一下发现答案基本上就是(n+1)+ΣC(n+i,i),其中i=1...m. 然后发现后面每一项可以递推,只要处理1..m的逆元就好了. 这题很容易爆long long,每一步都要取模. #incl ...
- Java 集合源码解析（2）：ListIterator
点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情和股票一样红,还是学学 ListIterator 吧! ListIterator 根据官方文档介绍, ListIt ...
- DBImg: 图片文件-二进制文件的转换
using System; using System.IO; using System.Drawing; //using System.Collections.Generic; //using Sys ...
- Web Browser使用技巧
无论是在桌面级开发中,还是在手机端开发中,WebBrowser都是一个经常会用到的控件.Windows Phone中的WebBrowser虽然远远没有桌面版那么强大,但依然足够应付常规用途.本文就来介 ...
- 1.NSThread
前言 每个iOS应用程序都有个专门用来更新显示UI界面.处理用户触摸事件的主线程,因此不能将其他太耗时的操作放在主线程中执行,不然会造成主线程堵塞(出现卡机现象),带来极坏的用户体验.一般的解决方案就 ...
- linux查看系统的启动时间和运行时间
1. uptime命令 输出:09:32:17 up 8:41, 1 user, load average: 0.01, 0.00, 0.00 其中8:41代表系统已经运行8小时41分 2.查看/pr ...
- python xlrd和xlwtxlutils包的使用
安装xlrd读取模块 首先去官网或者pypi下载安装包,然后解压到任意目录 在dos下进入该目录,执行python setup.py install安装 验证成功进入python,执行import 包 ...
- Core Java Volume I — 1.2. The Java "White Paper" Buzzwords
1.2. The Java "White Paper" BuzzwordsThe authors of Java have written an influential White ...
- SPAdes
用后感: 拼个小基因组还好,对于很大的基因组,文库很多的,还是不要用了.服务器768G内存,都不够用.... 主页: http://bioinf.spbau.ru/spades 说明书: http:/ ...