昨天在做项目的时候,遇到一个图片水平垂直居中的问题,要解决这个问题笔者想到了一个很简单的办法。
首先我们把页面的框架做出来,上代码:
<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了)