在網(wǎng)頁進行css布局時居中是經(jīng)常需要用到的，其中就有css絕對定位居中劫窒，那么本今，css絕對定位如何實現(xiàn)居中？今天的這篇文章將給大家來介紹關于css絕對定位居中的實現(xiàn)方法主巍。
css絕對定位居中的實現(xiàn)方法有很多冠息，下面將給大家介紹css絕對定位居中的四種方法。
web前端全棧資料粉絲福利（面試題孕索、視頻逛艰、資料筆記、進階路線）
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絕對定位居中。這種情況是在不考慮低版本瀏覽器的情況下可以使用枚荣。
