如何让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 ...
随机推荐
- leetcode 239 Sliding Window Maximum
这题是典型的堆排序算法,只是比一般的堆算法多了删除的操作,有两件事需要做: 1 用一个hash表存储从输入数组索引到堆数组(用于实现堆的那个数组)所以的映射,以便在需要删除一个元素的时候能迅速定位到堆 ...
- java equals 和hashcode
1 如果不知道怎么重载hashcode, eclipse自动代码生成工具会帮助你生成,大概的思路是设定一个int prim, 然后根据各个成员的值或者hashcode值进行某种运算即可,具体什么运 ...
- Osmocom-BB MOTO C118硬刷
写在最前面,先知我YY下硬刷最好可能实现的功能: 1.把软件刷入flash,修改loader后,可以实现上电就自动运行程序: 2.硬刷后,程序自动起来,可以修改loader就行加密 3.硬刷后,有可能 ...
- iOS探索：对NSArray中自定义的对象进行排序
http://mobile.51cto.com/hot-434804.htm 我们开发的每个程序都会使用到一些数据,而这些数据一般被封装在一个自定义的类中.例如一个音乐程序可能会有一个Song类,聊天 ...
- Functions
Small The first rule of functions is that they should be small.The second rule of functions is that ...
- Android Studio, gradle plugin is too old or set ANDROID_DAILY_OVERRIDE
早上打开Android Studio,忽然报了个错,说gradle plugin版本过低,让更新或者设置ANDROID_DAILY_OVERRIDE环境变量: 日志如下: INFO - ls.idea ...
- 学习进度条<第一周>
所花时间(包括上课):8小时(上课4,编程0.5,写博客1,读书2.5) 代码量:90行 博客量:4篇 了解到的知识点:什么是BUG 哪怕有几万分之一的概率也要考虑安全 ...
- if语句解一元二次方程~
#include<stdio.h>#include<math.h> void main(){ double a,b,c,x1,x2; printf("请输入a&q ...
- JavaScript中递归函数用法需要注意的
<script> function sum(num){ if(num<=1){ return 1; }else{ return num*sum(num-1);//return num ...
- linux性能监控基础命令
压力测试监控下系统性能方法之一 #top 该命令监控的是进程的信息 看图逐行意义 top:执行命令的之间 up:已经执行了277天 2users:目前有两个使用者,使用#who可以查看具体的使用者详情 ...