纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

最新推荐文章于 2025-07-24 09:43:04 发布

转载最新推荐文章于 2025-07-24 09:43:04 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hellman/p/8340081.html

本文介绍了一种仅使用CSS就能实现图片在div容器内水平和垂直居中的方法，适用于未知宽度和高度的图片场景。

.demo{border:1px #ddd solid;width:267px;height:267px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}
.demo a{display:table-cell;vertical-align:middle;width:267px;height:267px;}
.demo a img{margin:0 auto;max-width:267px;max-height:267px;}