css絕對定位居中的實(shí)現(xiàn)方法有很多，下面將給大家介紹css絕對定位居中的四種方法。

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

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 寬度的一半 */
}

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

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

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%為自身尺寸的一半 */
}

3、margin:auto實(shí)現(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布局實(shí)現(xiàn)css絕對定位居中。這種情況是在不考慮低版本瀏覽器的情況下可以使用。

本篇文章到這里就結(jié)束了，關(guān)于定位的更多內(nèi)容可以參考css手冊。

相關(guān)推薦：

盤點(diǎn)8種CSS實(shí)現(xiàn)垂直居中水平居中的絕對定位居中技術(shù)_html/css_WEB-ITnose

css絕對定位居中技術(shù)優(yōu)缺點(diǎn)圖表詳解

以上就是css絕對定位如何居中？css絕對定位居中的四種實(shí)現(xiàn)方法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！