這篇文章主要介紹“css絕對定位居中的方法有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css絕對定位居中的方法有哪些”文章能幫助大家解決問題。

隴南網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司自2013年起到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選成都創(chuàng)新互聯(lián)公司。

    1、兼容性不錯的主流css絕對定位居中的用法：

    .conter{

    width:600px;height:400px;

    position:absolute;left:50%;top:50%;

    margin-top:-200px;/*高度的一半*/

    margin-left:-300px;/*寬度的一半*/

    }

    注意：這種方法有一個很明顯的不足，就是需要提前知道元素的尺寸。否則margin負值的調(diào)整無法精確。此時，往往要借助JS獲得。

    2、css3的出現(xiàn)，使得有了更好的解決方法，就是使用transform代替margin.transform中translate偏移的百分比值是相對于自身大小的，可以這樣實現(xiàn)css絕對定位居中：

    .conter{

    width:600px;height:400px;

    position:absolute;left:50%;top:50%;

    transform:translate(-50%,-50%);/*50%為自身尺寸的一半*/

    }

    3、margin:auto實現(xiàn)絕對定位元素的居中(上下左右均0位置定位；margin:auto)

    .conter{

    width:600px;height:400px;

    position:absolute;left:0;top:0;right:0;bottom:0;

    margin:auto;/*有了這個就自動居中了*/

    }

    4、使用css3盒模型:flex布局實現(xiàn)css絕對定位居中。這種情況是在不考慮低版本瀏覽器的情況下可以使用。

關于“css絕對定位居中的方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。