代码居中生成工具：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%为自身尺寸的一半*/
}
.div2{
200px;height:200px;
border:5px solid black;
position:absolute;
left:0;
top:0;bottom:0;right:0;
margin:auto;/*50%为自身尺寸的一半*/
}
.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>