在網頁進行css布局時居中是經常需要用到的，其中就有css絕對定位居中，那么，css絕對定位如何實現居中？今天的這篇文章將給大家來介紹關于css絕對定位居中的實現方法。
1、兼容性不錯的主流css絕對定位居中的用法：
.conter{
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 寬度的一半 */
}注意：這種方法有一個很明顯的不足，就是需要提前知道元素的尺寸。否則margin負值的調整無法精確。此時，往往要借助JS獲得。
2、css3的出現，使得有了更好的解決方法，就是使用transform代替margin. transform中translate偏移的百分比值是相對于自身大小的，可以這樣實現css絕對定位居中：
.conter{
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%為自身尺寸的一半 */
}3、margin:auto實現絕對定位元素的居中(上下左右均0位置定位；margin: auto)
.conter{
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了這個就自動居中了 */
}4、使用css3盒模型:flex布局實現css絕對定位居中。這種情況是在不考慮低版本瀏覽器的情況下可以使用。
以上就是css絕對定位如何居中？css絕對定位居中的四種實現方法的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
