引子

我们经常遇到需要把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. Why am I getting an error converting a Foo** → const Foo**?

    Because converting Foo** → const Foo** would be invalid and dangerous. C++ allows the (safe) convers ...

  2. osmocom-bb中用osmocon刷入固件命令那些参数你都弄懂了吗？

    转载留做备份,原文地址:http://92ez.com/?action=show&id=23341 首先找到osmocon.c这个源文件,具体目录在这里 osmocom-bb/src/host ...

  3. Linux---- vim 插件

    http://hi.baidu.com/omnice/blog/item/4ba97317cc67cc10962b4378.html fuzzyfinder.vim 可以替代四个插件, 不过这个插件也 ...

  4. MATLAB简单实现ID3

    再看<MATLAB数据分析与挖掘实战>,简单总结下今天看到的经典的决策树算法——ID3. ID3:在决策树的各级节点上,使用信息增益的方法作为属性的选择标准,来帮助确定生成每个节点时所应采 ...

  5. YII2.0中实现高级注册

    如何在不修改逻辑代码的情况下完美解决以上三个问题?看了下面的教程,一目了然! 以高级版2.0.6为例,打开/frontend/models/SignupForm.php class SignupFor ...

  6. 用云存储和CDN轻松搞定网站图片

    http://www.kuqin.com/web/20120207/317912.html

  7. 在Runbook中添加Checkpoint-workflow

    本文说明的是使用Checkpoint-workflow的一种场景(当然还有其他场景需要Checkpoint-workflow). 起因:Windows Azure对Automation账户中的Runb ...

  8. cocos2d-html5 sprite打印宽高都为0的问题

    版本是2.1.4,在程序里直接通过图片路径addChild了一个cc.Sprite,想要缩放时通是不起做用,于是通过打印发现其宽,高都为0,查来查去,发现:原来是图片没有注册到Resource.js里 ...

  9. python字典中的元素类型

    python字典默认的是string item={"browser " : 'webdriver.irefox()', 'url' : 'http://xxx.com'} 如果这样 ...

  10. 搭建一个免费的，无限流量的Blog----github Pages和Jekyll入门

    喜欢写Blog的人,会经历三个阶段. 第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客. 第三阶段,觉得独立博客的管 ...