纯CSS实现未知尺寸图片垂直居中
yqxbc 发布时间:08-29 来源:一起学编程 浏览:6次
淘宝UED前端招聘中有这样一道题目:使用纯CSS实现未知尺寸的图片(但宽高都小于200px)在200px的正方形容器中水平和垂直居中。

下面是一个权衡的相对结构干净、CSS简单的解决方法:
.cssbox{
 /* 非IE内核浏览器识别垂直居中 */
 display:table-cell;
 vertical-align:middle;
 /* IE内核浏览器识别垂直居中 */
 *display:block;
 /* 约为高度的0.873,200*0.873 约为175 */
 *font-size:175px;
 text-align:center;
 width:200px;
 height:200px;
}
.cssbox img{
 vertical-align:middle;
}

如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息!