絕對定位元素居中對齊

作者:烽行天下

我們在使用CSS對網頁進行排版時難免會使用到position:absolute,當你使用了這個屬性之后,你會發現那個元素的位置會跑偏。因為它已經脫離了父元素的約束。如果你本來想讓它絕對定位,然后僅僅為了層疊在其它元素之上,這時可能不如意。那你要怎么辦呢?我們可以設置它的準確位置用top,right,bottom,left,來定義它距離上右下左的位置,但你會發現這個方法做出來的網頁僅限在你的顯示器上看,你換一個大點或小點的顯示器就會發現它跑位。為了讓它能夠居中,我上網查了許多資料,最后終于找到一個比較靠譜的方法,就是給這個元素加上個寬度,如:width:960px,然后以屏幕的50%對齊就是left:50%;,這時候你會發現它是以最左邊在屏幕的50%位置,最后一下是讓元素向左移一半就是:margin-left:-480px;好了,這樣就可以讓它即能絕對定位,又能絕對居中。試試看吧,給你個完整的CSS代碼直接套用。

.abc{
position:absolute;
width:960px;
left:50%;
margin-left:-480px;
}

四川时时彩在线投注