引子

我们经常遇到需要把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. 在.net中实现在textbox中按ctrl+enter进行数据的提交

    textbox.Attributes.Add("onKeydown", "if(event.ctrlKey&&event.keyCode == 13){d ...

  2. 简单的多线程（活用OD解决运行时错误）

    代码源自<VC++深入详解>第15章 “多线程”,位于第563页 - 566 页. 程序的目的是展示多线程运行的效果: #include <windows.h> #includ ...

  3. C#导入、导出功能

    //导出功能 protected void btnExport(object sender, EventArgs e) { //用来打开下载窗口 string fileName = "中心联 ...

  4. 浏览器关闭使session失效的问题多种解决方式

    直接关闭浏览器(或者强制关闭浏览器进程.死机等),服务器无法处理用户退出网站的请求,此举将会导致session失效,下面整理了一些解决方法,感兴趣的朋友可以参考下哈   如果用户不点击网站的“退出”链 ...

  5. HDU 5405 (树链剖分+线段树）

    Problem Sometimes Naive 题目大意 给你一棵n个节点的树,有点权. 要求支持两种操作: 操作1:更改某个节点的权值. 操作2:给定u,v, 求 Σw[i][j]   i , j ...

  6. Howto add permanent static routes in Ubuntu

    Static routing is the term used to refer to the manual method used to set up routing. An administrat ...

  7. yii表单

    yii  的dropdownlist,用yii的session可以记下选中的状态 $form = $this->beginWidget('CActiveForm',array('action'= ...

  8. dedecms内容页 上下篇 添加文章描述方法

    dedecms5.7修改后 运行正常! 在根目录include文件夹中修改arc.archives.class.php文件,812行左右:为$query添加查询字段arc.description,分别 ...

  9. OpenHCI - Data Transfer Types

    There are four data transfer types defined in USB(USB中有4种数据传输类型). Each type is optimized to match th ...

  10. ANTLR3完全参考指南读书笔记[03]

    前言 文中第4章内容有点多,有点枯燥,但不坚持一下,之前所做的工作就白做了. 再次确认一下总体目标: protege4编辑器中Class Definition中语法解析和错误提示: Java虚拟机规范 ...