div居中显示

时间 2019-12-05

标签 div 居中显示栏目 CSS 繁體版

原文原文链接

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

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

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

width:600px;（将最小高度设置为图片的原始宽度，保证背景图片能够彻底显示）工具

min-height: 717px;（将最小高度设置为图片的原始高度，保证背景图片能够彻底显示）url

background:url();orm

background-size:100% 100%;htm

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

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

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

二、讲解第二种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%为自身尺寸的一半*/
}

三、讲解第三种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代码

四、

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