div居中显示

代码居中生成工具：http://howtocenterincss.com/；

一：div中放置图片时div高度为0，而不是等于图片的高度；检查div的子元素img是否设置了浮动，有浮动，说明是浮动对父元素div产生的影响，在父元素div中清除浮动（加overflow:auto/hidden）即可；

二：要想背景图片的高度（height）可以随内容的多少而自动增大，可以如下设置：

600px;（将最小高度设置为图片的原始宽度，保证背景图片可以完全显示）

min-height: 717px;（将最小高度设置为图片的原始高度，保证背景图片可以完全显示）

background:url();

background-size:100% 100%;

三、三种div元素水平居中的方法

1.讲解第一种div绝对定位水平垂直居中【CSS3使用transform】， transform中translate偏移的百分比值是相对于自身大小的，无论绝对定位元素的尺寸是多少，其都是水平垂直居中显示的，但问题是兼容性不好。IE9+以及其他现代浏览器才支持。IE9之前版本不支持,在IE8模式下，不居中

.div1{
100px; height: 100px;
border:4px solid red;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /*50%为自身尺寸的一半*/
}

2、讲解第二种div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，代码两个关键点：1.上下左右均0位置定位；2.margin: auto; 其width、height如何更改都是居中显示的，兼容性可以,IE7及之前版本不支持，

.div2{
200px;height:200px;
border:5px solid black;
position:absolute;
left:0;
top:0;bottom:0;right:0;
margin:auto;/*50%为自身尺寸的一半*/
}

3、讲解第三种div绝对定位水平垂直居中【要提前知道div宽度与高度的值实现绝对定位元素的居中】，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。兼容性好，

.div3{
300px;height:300px;
border:3px solid green;
position:absolute;
left:50%;top:50%;
margin-left:-150px;/*150为宽度尺寸的一半*/
margin-top:-150px;/*150为高度尺寸的一半*/
}

html代码

4、

<body>
<div class="div1">我是div1</div>
<div class="div2">我是div2</div>
<div class="div3">我是div3</div>
</body>
</html>