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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。