您的位置：首页 > 其它

已知图片大小，让其在页面中垂直水平居中

2015-11-27 11:09 501 查看

昨天在做项目的时候，遇到一个图片水平垂直居中的问题，要解决这个问题笔者想到了一个很简单的办法。

首先我们把页面的框架做出来，上代码：

<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了）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 垂直水平居中;div居中;图片居中

相关文章推荐

新的分享

章节导航