html图片要上下居中显示,CSS图片垂直居中最简单的方法推荐

使用CSS实现图片垂直居中，本文提供三种方法实现CSS图片居中，其中第一种加一个标签的方法是我推荐的，代码简洁，兼容性比较好，其他的hack可能会存在问题，不建议使用。如果你对图片实现居中有更好的方法，也请告知我们。

详情请参考之前写过的一篇文章：CSS多行文字垂直居中的两种方法。

HTML代码：

CSS代码：

.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }

.middle-box img{vertical-align: middle; }

.visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;}

目前我觉得这种方法是最简洁的。

演示

当然你也可以看一下上面这篇文章的另外一种方法。

网上还有许多：大小不固定的图片、多行文字的水平垂直居中

1.使用display:table-cell加文字

HTML部分(仅示例一张图片，其他重复，故略)：

• 

css部分：

.zxx_align_box_4 li{float:left; margin-right:13px;}

.zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}

.zxx_align_box_4 li div img{vertical-align:middle;}

注意：高度：文字大小=1.14，这个比例我一直记着，但是后来我将这个比例的概念淡化了，原因在于多次遇到其他比例实现效果的情况。例如上面，就是1:1实现的。

2.display:inline-block加文字居中的，只适用于多图垂直居中对齐的情况。

HTML部分(仅示例两张图片，其他重复，故略)：

css部分：

.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}

.zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}

不知道这个文字比例是怎么算的，感觉用我上面的第一种方法比较靠谱，虽然多了一个标签，但还是可以接受的。