昨天在做項目的時候，遇到一個圖片水平垂直居中的問題，要解決這個問題筆者想到了一個很簡單的辦法。
首先我們把頁面的框架做出來，上代碼：
<html>
<head>
<title>圖片水平垂直居中</title>
<style>
.my_div{
width:1000px;
height:700px;
border:1px solid red;
position:relative;
}
.my_img{
display:block;
width:400px;
height:300px;
position:absolute;
left:50%; //絕對定位讓圖片距離左邊50%
top:50%; //同上
margin-left: -200px; //還要減去圖片寬度的一半
margin-top:-150px; //同上
}
</style>
</head>
<body>
<div class="my_div">
<img class="my_img" src="weixin.png" />
</div>
</body>
</html>這樣就實現了我們的要求了，大家仔細看嵌入到裏邊的css代碼，不難發現，我把圖片採用了絕對定位，讓它的left和top都等於50%，但是這並不意味着圖片就水平和垂直居中了，此時可以巧妙的才用負的margin（可能有很多小朋友還不知道margin有負的這種寫法，不懂就問度娘吧）來減去圖片寬高的一半，然後，目的就達到了，是不是 so easy 啊！
舉一反三：不僅僅只適用於圖片外邊是div（盒子）的模型，還可以相對於整個窗口居中，都是類似的（讓圖片position:fised；就OK了）