CSS定位絕對(duì)居中顯示是指將一個(gè)元素居中顯示在其父級(jí)容器中,不論父級(jí)容器的大小和元素本身的大小。這在實(shí)際開(kāi)發(fā)中非常實(shí)用,因?yàn)橥覀冃枰谄聊簧洗怪被蛩骄又酗@示某些元素。
.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
上述代碼是實(shí)現(xiàn)絕對(duì)居中的基本代碼,首先將元素設(shè)置為絕對(duì)定位,并把top和left都設(shè)置為50%,將元素移動(dòng)到父級(jí)容器的中心。但是,此時(shí)元素的左上角位于中心點(diǎn),此時(shí)我們需要使用CSS3的transform屬性中的translate函數(shù),將元素向左向上移動(dòng)自身寬度高度的一半,即可實(shí)現(xiàn)絕對(duì)居中。
需要注意的是,父級(jí)容器必須設(shè)置position屬性,否則不能實(shí)現(xiàn)定位的效果。