css絕對(duì)定位居中的方法有哪些

這篇文章主要介紹“css絕對(duì)定位居中的方法有哪些”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css絕對(duì)定位居中的方法有哪些”文章能幫助大家解決問(wèn)題。

    1、兼容性不錯(cuò)的主流css絕對(duì)定位居中的用法：

    .conter{

    width:600px;height:400px;

    position:absolute;left:50%;top:50%;

    margin-top:-200px;/*高度的一半*/

    margin-left:-300px;/*寬度的一半*/

    }

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

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

    .conter{

    width:600px;height:400px;

    position:absolute;left:50%;top:50%;

    transform:translate(-50%,-50%);/*50%為自身尺寸的一半*/

    }

    3、margin:auto實(shí)現(xiàn)絕對(duì)定位元素的居中(上下左右均0位置定位；margin:auto)

    .conter{

    width:600px;height:400px;

    position:absolute;left:0;top:0;right:0;bottom:0;

    margin:auto;/*有了這個(gè)就自動(dòng)居中了*/

    }

    4、使用css3盒模型:flex布局實(shí)現(xiàn)css絕對(duì)定位居中。這種情況是在不考慮低版本瀏覽器的情況下可以使用。

關(guān)于“css絕對(duì)定位居中的方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。