引子

我们经常遇到需要把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. 使用Qemu调试内核

    利用Qemu进行内核源码级调试 http://blog.csdn.net/gdt_a20/article/details/7231652 用Qemu调试Linux内核 http://blog.chin ...

  2. My_Python的常用函数.

    范围生成函数 class range(object) | range(stop) -> range object | range(start, stop[, step]) -> range ...

  3. poll函数和串口设置

    2015.1.24 今天星期六,多云,早晨8:17起床的,今天是来南京起床最迟的一天,因为昨晚睡得有点迟,今天又不用上课,整个人有点放松.收拾好来到教室,教室门没有开,胡明也到了,其他人还在宿舍睡觉, ...

  4. LINQ学习之旅（六）

    Insert/Update/Delete操作 插入(Insert) 1.简单形式 说明:new一个对象,使用InsertOnSubmit方法将其加入到对应的集合中,使用SubmitChanges()提 ...

  5. iOS开发:JavaScriptCore.framework的简单使用--JS与OC的交互篇

    iOS7之后苹果为众猿推出了JavaScriptCore.framework这个框架,这个框架为大家在与JS交互上提供了很大帮助,可以在html界面上调用OC方法并传参,也可以在OC上调用JS方法并传 ...

  6. iOS log第三方库之间的对比

  7. 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 ...

  8. 微信OAuth2网页授权

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using YTO.WeiX ...

  9. 实现Magento多文件上传代码功能开发

    在Magento中上传单个文件很简单,可以直接在继承的Mage_Adminhtml_Block_Widget_Form类中直接添加如下组件Field:  对于图片:   $fieldset->a ...

  10. Link Aggregation and LACP with Open vSwitch

    In this post, I’m going to show you how to use link aggregation (via the Link Aggregation Control Pr ...