今天文匯建站公司的小編給大家?guī)韮煞N元素居中的方式,可根據(jù)網(wǎng)站的具體情況進行選擇使用。
一、已知寬度的元素居中
思路:居中元素父級設置相對定位,居中元素絕對定位,距離頂部 top:50%,左邊left:50%,通過margin-top、margin-left等于負的居中元素寬高的一半。
.box{position:relative;width:200px;height:300px;}
.a{position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-100px;}
二、未知寬度的元素居中
思路:居中元素父級設置相對定位,居中元素絕對定位,距離頂部 top:50%,左邊left:50%,然后使用css3 transform:translate(-50%; -50%)使元素居中。
.box{position:relative;width:200px;height:300px;}
.a{position:absolute;top:50%;left:50%;margin-top:-150px;transform:translate(-50%; -50%);}
雖然第二種方式更為便捷簡單,但IE9以下不支持transform屬性。
下一篇: H標簽如何在網(wǎng)站中正確使用