html中將怎樣一個圖片絕對居中?

我們製作HTML頁面的時候，經常會遇到需要把圖片相對居中，讓圖片正好在水平居中的位置，這個需要我們怎樣具體的去實現呢，今天小漁就來為大家講解一下。

方法/步驟

首先，我們準備好對應的圖片，當然這是依照設計圖而來的，所以我們還需要一份讓圖片絕對居中的設計圖，一個製作了部分的HTML頁面

可以明顯的看到這張圖片是在這個DIV中水平方向上居中的。既是絕對居中就需要設定position屬性，我們需要將圖片的position設為absolute，其父級元素的position設為relative。

這樣設定之後，我們需要對圖片的位置進行進一步的設定，思路是左右應該是佔一半，我們設定left為50%即可。

高度應該是隨意的，我們姑且將高度（top）設為0。

這樣看似做好了，但是細心的朋友會發現，圖片並沒有水平居中，而是向右偏移了一些。

我們來重新考慮一下，所謂的水平居中指的應該是圖片的中線和其父級元素的中線是重合的，我們設定left：50%,只是將圖片的左端點和父級元素的中線對齊了，我們還需要為圖片設定為圖片寬度一般的外邊距。

我們為圖片設定margin-left為負的圖片寬度的一半，這樣圖片會向左移動一半，我們的圖片就絕對劇中個。

注意事項

這個問題很簡單，關鍵是我們需要為圖片設定一個左邊距。