css絕對定位如何居中？ css絕對定位居中的四種實作方法

在網頁進行css佈局時居中是經常需要用到的，其中就有css絕對定位居中，那麼，css絕對定位如何實現居中？今天的這篇文章將為大家介紹關於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絕對定位居中。這種情況是可以在不考慮低版瀏覽器的情況下使用。

相關文章推薦：
1.CSS如何進行絕對定位
2.實例講解CSS中相對定位和絕對定位的用法與差異（圖文）
3.css絕對定位居中技術優缺點圖表詳解
相關影片推薦：
1.CSS影片教學-玉女心經版

本篇文章到這裡就結束了，關於定位的更多內容可以參考css手冊。

以上是css絕對定位如何居中？ css絕對定位居中的四種實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！