引子

我们经常遇到需要把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. Python学习路程day5

    冒泡排序 将一个不规则的数组按从小到大的顺序进行排序 data = [10,4,33,21,54,3,8,11,5,22,2,1,17,13,6] #第一次循环,最后一个数字不需要循环,因为最大值已经 ...

  2. python 优雅的使用正则表达式 ~ 1

    正则表达式简介 正则表达式 , 也称谓 REs , 本质上是一个微小且高度专业化的编程语言. 他被嵌入到许多语言当中 , 例如 python 就是通过 re 模块来提供给我们使用 , 正则表达式 是通 ...

  3. Cisco ASA 5505 Routing Between Two (Internal) VLANS

    Referenced:http://www.petenetlive.com/KB/Article/0000869 Problem I had to set this up for a client t ...

  4. HDU 4386

    http://acm.hdu.edu.cn/showproblem.php?pid=4386 题意:给四条边长,问能否组成四边形,如果能,求最大面积 求最大面积用海伦公式的四边形推广,p=(a+b+c ...

  5. IDataReader转换成list通用方法

    public static IList<T> ReaderToList<T>(this IDataReader dr) { //DateTime dt = DateTime.N ...

  6. [转]设计模式（22）－Strategy Pattern

    一. 策略(Strategy)模式 策略模式的用意是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换.策略模式使得算法可以在不影响到客户端的情况下发生变化. 假 设现 ...

  7. magento currency magento头部增加币种切换选择

    magento currency magento头部增加币种切换选择 默认magento 货币选择切换是显示在左边 有时候我们需要让其显示在头部 Step 1. Create a new file a ...

  8. 配置集成环境xampp-win32-1.7.0-installer.exe

    第一步:准备当然要有xampp-win32-1.7.0-installer.exe这个软件了啊,大家可以去网站上下载这个就不必多说了吧在安装之前一定要将apache,mysql,httpd这一系列进程 ...

  9. WebBrowser使用详解

    编号:1007时间:2016年4月29日14:53:45功能:WebBrowser使用详解URl:http://blog.sina.com.cn/s/blog_3d7bed6501000c8n.htm ...

  10. Linux中的likely()和unlikely()

    likely()与unlikely()在2.6内核中,随处可见,那为什么要用它们?它们之间有什么区别呢?首先明确: if (likely(value))等价于if (value) if (unlike ...