css中圖片使用絕對位置實現置中效果

標籤：中間   使用   方案   絕對位置   div   負數   效果   存在   line   

存在問題

問題如標題所說，咱們在給圖片設定絕對位置的時候就會遇到無法置中圖片的問題。怎麼解決？margin:0 auto?

很顯然這個時候設定margin是無效的。

解決方案

假設咱們的圖片寬度為100px；那我們就這麼寫：

position:absolute;

left:50%;

margin-left:-50px; （此處margin-left的值寫該圖片寬度的一半）

 

解釋：

1、使用絕對位置，設定left值將圖片移到正中間，此時圖片的左邊框在螢幕的中線位置

2、設定margin-left，注意值為負數，咱們把圖片向左移圖片寬度一半的位置

 

這樣我們的問題就解決了~

css中圖片使用絕對位置實現置中效果