CSS让图片垂直居中的几种技巧

图片垂直居中是个经典的问题,网上关于这个的方法也非常多,良莠不齐,本人比较推荐的以下三种简单的方法,大家可以稍做参考。

1.淘宝的方法
在曾经的"淘宝UED招聘"中有这样一道题目:
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。
题目的难点在于两点:
垂直居中;
图片是个置换元素,有些特殊的特性。
至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:
.box {

display: table-cell;
vertical-align:middle;

text-align:center;

*display: block;
*font-size: 175px;
*font-family:Arial;
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {

vertical-align:middle;
}




2.背景法



最简单的方法莫过于背景法了,但不利于动态导入的图片
3.背景法
.qq {
width:500px;
display:table-cell;
height:400px;
text-align:center;
vertical-align:middle;
border: 1px solid #000
}
i {
display:inline-block;
height:100%;
vertical-align:middle
}
.qq img {
vertical-align:middle;
}

CSS让图片垂直居中的几种技巧_第1张图片

这种方法也很简单,但需要加一个的额外标签,小不爽~
如果页面需要一两个居中的图片,那此方法是可推荐,但如果很多个产品的图,那加的标签数量可不是小数目喽~大家衡量着使用吧

另外也有其它的许多解决方法,只是看起来并不怎么理想,相对简单并且可推荐就是以上这三种,其它的这里就不作介绍了,有兴趣的朋友可以看这里:http://bbs.blueidea.com/thread-2666987-1-9.html
另外,再说一下文字垂直居中的方法。一直以为此方法同样有效于图片,只是昨天做一个DEMO才发现原来不行。
div{
height: 400px;
line-height: 400px;
overflow: hidden;
}
此方法也只适用于单行的文字,或者是图片+文字,通常可见于页面上的前面带有小图标的链接或标题等。

这个还不错居中方法


CSS让图片垂直居中的几种技巧_第2张图片
image.png

好吧,其实这里直接换一个空标签就行了,不过要转成inline-block


CSS让图片垂直居中的几种技巧_第3张图片
image.png

你可能感兴趣的:(CSS让图片垂直居中的几种技巧)