使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。

最新推荐文章于 2021-07-31 12:17:12 发布

失眠万岁

最新推荐文章于 2021-07-31 12:17:12 发布

阅读量2.3k

点赞数

分类专栏： html css div兼容等 web前端前端优化文章标签： css float border div ie

本文链接：https://blog.csdn.net/d19891006/article/details/6768747

版权

web前端同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

css

24 篇文章 0 订阅

订阅专栏

html

19 篇文章 0 订阅

订阅专栏

div{width:200px; height:200px; border:1px solid #666; display:table-cell; vertical-align:middle; text-align:center;
    *float:left;//这里使用float:left来兼容ie支持左右排列}
div img {margin-top:expression(100-this.height/2);//若不想左右排列则可以使用vertical-align:middle;代替，建议大家这里使用表达式，虽然在性能上有所欠缺，但ie6就这个命，没办法}

当然可能还有其他好办法，望广大钱端攻城师施舍施舍你们的好菜