2022-06-19 分類: 網(wǎng)站建設(shè)
第一種方法:
div.box{
weight:200px;
height:400px;
<!--把元素變成定位元素-->
position:absolute;
<!--設(shè)置元素的定位位置,距離上、左都為50%-->
left:50%;
top:50%;
<!--設(shè)置元素的左外邊距、上外邊距為寬高的負(fù)1/2-->
margin-left:-100px;
margin-top:-200px;
}
*兼容性好;缺點:必須知道元素的寬高
-------------
第二種方法:
div.box{
weight:200px;
height:400px;
<!--把元素變成定位元素-->
position:absolute;
<!--設(shè)置元素的定位位置,距離上、左都為50%-->
left:50%;
top:50%;
<!--設(shè)置元素的相對于自身的偏移度為負(fù)50%(也就是元素自身尺寸的一半)-->
transform:translate(-50%,-50%);
}
*這是css3里的樣式;缺點:兼容性不好,只支持IE9+的瀏覽器
---------------
第三種方法
div.box{
weight:200px;
height:400px;
<!--把元素變成定位元素-->
position:absolute;
<!--設(shè)置元素的定位位置,距離上、下、左、右都為0-->
left:0;
right:0;
top:0;
bottom:0;
<!--設(shè)置元素的margin樣式值為 auto-->
margin:auto;
}
*兼容性較好,缺點:不支持IE7以下的瀏覽器
新聞名稱:讓一個元素垂直水平居中的三種方法
轉(zhuǎn)載注明:http://m.rwnh.cn/news3/169103.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、手機網(wǎng)站建設(shè)、建站公司、Google、App開發(fā)、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容