昨天在做项目的时候，遇到一个图片水平垂直居中的问题，要解决这个问题笔者想到了一个很简单的办法。
首先我们把页面的框架做出来，上代码：
<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了）
本文出自 “D调小蜗牛” 博客，谢绝转载！
原文：http://10271962.blog.51cto.com/10261962/1717364