div居中显⽰
⼀：div中放置图⽚时div⾼度为0，⽽不是等于图⽚的⾼度；检查div的⼦元素img是否设置了浮动，有浮动，说明是浮动对⽗元素div产⽣的影响，在⽗元素div中清除浮动（加overflow:auto/hidden）即可；
⼆：要想背景图⽚的⾼度（height）可以随内容的多少⽽⾃动增⼤，可以如下设置：
width:600px;（将最⼩⾼度设置为图⽚的原始宽度，保证背景图⽚可以完全显⽰）
min-height: 717px;（将最⼩⾼度设置为图⽚的原始⾼度，保证背景图⽚可以完全显⽰）
background:url();
css实现垂直水平居中background-size:100% 100%;
三、三种div元素⽔平居中的⽅法
1.讲解第⼀种div绝对定位⽔平垂直居中【CSS3使⽤transform】， transform中translate偏移的百分⽐值是相对于⾃⾝⼤⼩的，⽆论绝对定位元素的尺⼨是多少，其都是⽔平垂直居中显⽰的，但问题是兼容性不好。IE9+以及其他现代浏览器才⽀持。IE9之前版本不⽀持，在IE8模式下，不居中
.
div1{
width: 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{
width: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{
width: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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。