• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

【图片居中】图片在固定框架内 上下左右水平全部居中_CSS学习

当前位置：网站建设 > 技术支持

经常会遇到这样的样式，之前在制作zblog主题时已经遇到过两次，特此来分享下：

PS：之前分享过一篇：《垂直居中（上下左右都居中）任何元素CSS代码》

今天就针对图片：

HTML代码：

<div class="proimg"><a href="#"><img src="
TB2mjuonFXXXXbQXpXXXXXXXXXX_!!670680248.jpg_160x160.jpg"></a></div>

CSS：

.proimg{width: 160px; height: 160px; border: 1px solid #CCCCCC;position:relative;overflow:hidden;} //必须position:relative;

.proimg img{max-width: 100%;max-height: 100%;position: absolute;top:50%;left: 50%;
-webkit-transform: translate(-50%,-50%); /*-webkit-是厂商前缀*/
-ms-transform: translate(-50%,-50%); /*-ms-是厂商前缀*/
transform: translate(-50%,-50%);/*translate是移动属性，两个-50%代表着像原始位置向左、向上各移动50%*/

}

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。