引子

我们经常遇到需要把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水平垂直居中的更多相关文章

  1. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  2. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  3. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  4. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  5. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

  6. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  7. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

  8. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  9. 如何将一个div水平垂直居中？4种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

随机推荐

  1. 使用hadoop multipleOutputs对输出结果进行不一样的组织

    MapReduce job中,可以使用FileInputFormat和FileOutputFormat来对输入路径和输出路径来进行设置.在输出目录中,框架自己会自动对输出文件进行命名和组织,如:par ...

  2. N个元素组成二叉树的种类

    <算法>中的二叉查找树一节的一道习题. N个元素组成的二叉树固定一个根节点,这个根节点的左右子树组合数为(0,n-1),(1,n-2),(2,n-3)...(n-1,0),假设N个元素组成 ...

  3. PB常用日期

    用一条语句写成的有关日期函数 //1.生肖(年份参数:int ls_year  返回参数:string): mid(fill('鼠牛虎兔龙蛇马羊猴鸡狗猪',48),(mod(ls_year -1900 ...

  4. 修改主机名Ubuntu

    主机名存放在/etc/hostname 修改保存即可

  5. 【LEETCODE OJ】Binary Tree Postorder Traversal

    Problem Link: http://oj.leetcode.com/problems/binary-tree-postorder-traversal/ The post-order-traver ...

  6. (Foundation)NSObject 、 NSString 、 NSMutableString

    1 重构Student和Book类 1.1 问题 本案例需要创建一个Book类,类中有一个整型price属性,用于记录书的价格.还需要创建一个Student类,类中有两个带参属性,它们是整型的年龄ag ...

  7. Android Listener 监听的几种写法

    Android中,View的Listener方法,在是否使用匿名类匿名对象时,有各种不同的写法. OnClickListener和其他Listener方法一样,都是View类的接口,重载实现后就能使用 ...

  8. 不错的nginx文章，找个时间好好看下。

    http://blog.csdn.net/chosen0ne/article/category/915324

  9. 基于Open vSwitch的OpenFlow实践

    Open vSwitch(下面简称为 OVS)是由 Nicira Networks 主导的,运行在虚拟化平台(例如 KVM,Xen)上的虚拟交换机.在虚拟化平台上,OVS 可以为动态变化的端点提供 2 ...

  10. PE安装原版XP系统(含高版本PE安装选项灰色处理办法)

    PE 安装 XP 镜像流程准备原版 XP 安装光盘镜像放到硬盘非 C 盘. 可解压到本地经行安装, 也可以使用虚拟光驱载入安装 (本教程主要讲 PE 内虚拟光驱载入安装) 第一步:用 U 盘或硬盘/光 ...