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

来源：网络整理时间：2023/3/4 0:55:32 共 3601 浏览

经常会遇到这样的样式，之前在制作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%*/

}

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

·上一条：position:absolute; clip 属性剪切了一幅图像：_CSS学习 | ·下一条：CSS3 2D 转换 - 移动，比例化，反过来，旋转，和拉伸元素。_CSS学习

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

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