您好,登錄后才能下訂單哦!
小編給大家分享一下CSS盒子居中常用的方法有哪些,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
第一種:
用css的position屬性
<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { width: 40px; height: 40px; background-color: red; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } </style> <div class="div1"> <div class="div2 "> </div> </div>
效果圖:
第二種:
利用css3的新增屬性table-cell, vertical-align:middle;
<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; display: table-cell; vertical-align: middle; } .div2 { width: 40px; height: 40px; background-color: red; margin: auto; } </style> <div class="div1"> <div class="div2"> </div> </div>
效果:
第三種:
利用flexbox布局
<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; display: flex; /*!*flex-direction: column;*!可寫可不寫*/ justify-content: center; align-items: center; } .div2 { height: 40px; width: 40px; background-color: red; } </style> <div class="div1 "> <div class="div2 "> </div> </div>
效果:
第四種:
利用transform的屬性(缺點(diǎn):需要支持Html5)
<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { height: 40px; width: 40px; background-color: red; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> <div class="div1 "> <div class="div2 "> </div> </div>
效果圖:
看完了這篇文章,相信你對“CSS盒子居中常用的方法有哪些”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。