在網(wǎng)頁進行css布局時居中是經(jīng)常需要用到的，其中就有css絕對定位居中，那么，css絕對定位如何實現(xiàn)居中？今天的這篇文章將給大家來介紹關于css絕對定位居中的實現(xiàn)方法。

公司主營業(yè)務：做網(wǎng)站、網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出興業(yè)免費做網(wǎng)站回饋大家。

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絕對定位如何居中？css絕對定位居中的四種實現(xiàn)方法的詳細內(nèi)容，更多請關注創(chuàng)新互聯(lián)其它相關文章！

當前文章：css中有什么方法可以實現(xiàn)絕對定位居中?
URL鏈接：http://chinadenli.net/article10/ppiggo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、App設計、外貿(mào)建站、面包屑導航、網(wǎng)站改版、自適應網(wǎng)站

廣告

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