vertical-align: middle垂直居中

在css中要实现内容垂直居中我们的css有个vertical-align: middle; 属于，但是一般情况下是没有效果的，下面我们来看解决办法。

 div水平居中很容易，设置css样式 text-align: center;  就可以了。

垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。

第一种方法：通过一个空白图片可以达到垂直居中的效果。

 

代码如下	复制代码

个人觉得vertical-align: middle 是相对于左边的高度垂直居中的，我给左边一个填满div的图片，就可以实现垂直居中了。

第二种方法：往div里面加表格。

 

代码如下	复制代码

在表格里就很容易设置居中了。

经测试，这两种做法都没有浏览器不兼容的问题。推荐用第一种方法。

另外，说一下overflow: hidden; 这个属性，当图片大小超出div的大小时，会影藏超出的部分。不设置的话，图片会全部显示，覆盖在div上。

另一种方法

现在我要让class="img404"的img在class="wall"的div里面垂直居中，我可以在div里面加一个span空标签，把它的高度设为100%，再给它一个vertical-align:middle样式，同样地给img一个vertical-align:middle样式，那么img就可以在div里面垂直居中了。如图：

代码如下	复制代码

以上的CSS里面值得一提的是.verticalAlign，加一个display:inline-block是为了触发它的layout，以让本来没有layout的span可以设置宽和高，margin-left:-1px是为了让span左移一个像素，而令img在水平方向上回到正中位置；另外.wall里面的font-size:0正如我上一篇文章所说的是为了消除代码换行所造成的空隙。