CSS3讓元素居中的四種方法

我是成都做網(wǎng)站的一名前端工程師，今天我給大家分享的是css中讓元素居中的四種方法。希望這篇文章對(duì)大家能有所幫助。

第一種方法:

div.box{

weight:200px;

height:400px;

position:absolute;

left:50%;

top:50%;

margin-left:-100px;

margin-top:-200px;

}

有點(diǎn)是兼容性好;缺點(diǎn)是必須知道元素的寬高

-------------

第二種方法：

div.box{

weight:200px;

height:400px;

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

不用知道元素的寬高;缺點(diǎn)是兼容性不好，只支持iE9+的瀏覽器

---------------

第三種方法

div.box{

weight:200px;

height:400px;

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

}

優(yōu)點(diǎn)是兼容性較好，缺點(diǎn)是不支持iE7以下的瀏覽器

---------------

第四種方法

div{

display:flex;

justify -content:center;

align-items:center;

}

以上就是成都做網(wǎng)站的創(chuàng)新互聯(lián)π為大家分享的CSS3讓元素居中的四種方法

希望對(duì)各位小伙伴有所幫助。

如果大家對(duì)有什么技術(shù)方面的問題，可以關(guān)注成都做網(wǎng)站的創(chuàng)新互聯(lián)官方公眾號(hào)“創(chuàng)新互聯(lián)π”，其中會(huì)有大量關(guān)于”互聯(lián)網(wǎng)+”的相關(guān)的內(nèi)容供大家互相學(xué)習(xí)了解，同時(shí)歡迎大家一起討論技術(shù)問題。

通過以上內(nèi)容的說明，大家對(duì)CSS3讓元素居中的四種方法已經(jīng)有了一定的了解。如果大家還有什么問題可以在創(chuàng)新互聯(lián)π留言，我們會(huì)在下期的文章更新中為您解答您的問題。

希望成都做網(wǎng)站的創(chuàng)新互聯(lián)做網(wǎng)站做的越來越好。

如果大家覺得創(chuàng)新互聯(lián)π寫的文章對(duì)大家有用的話別忘了分享給朋友，萬分感謝大家對(duì)創(chuàng)新互聯(lián)π的支持。

碼字不易，且看且珍惜......

本文題目：CSS3讓元素居中的四種方法
當(dāng)前地址：http://m.kartarina.com/news9/318009.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、軟件開發(fā)、外貿(mào)建站、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)