.container{ width: 800px; height: 500px; position: relative; border: 1px solid gray; text-align: center; vertical-align: middle; }
可以看到,这个容器的宽度和高度都已经设定好了,也增加了边框的样式。接着,我们需要将图片样式设置为绝对定位并设置为在容器中水平居中和垂直居中。
.img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
这里,我们使用了transform属性的translate属性,使图片的左上角底部偏移量为自身宽高的50%,也就是使图片完全居中。
<div class = "container"> <img class = "img" src = "picture.gif"> </div>
那么就这样,我们成功了让CSS图片在容器内居中,上面的代码记得要好好体会呦
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。