实现任意图片垂直居中的三种方法

在网站开发过程中，可能会有希望图片垂直居中的情况，而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。我总结了一下，曾经使用过的几种方法来使图片垂直居中，除了***种方法只限于标准浏览器外，另外两种方法的兼容性还不错。

创新互联是一家专业提供湘潭县企业网站建设,专注与成都做网站、网站建设、H5高端网站建设、小程序制作等业务。10年已为湘潭县众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

方法一：

将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。

代码如下：

 
 
 
 
  
  
  
    
  
  
  
    
  
  
  
        
  
  
  
      方法1 - 未知高度的图片垂直居中 - www.cleanthem.com  
  
  
  
    
  
  
  
  body {  
  
  
  
      height:100%;  
  
  
  
  }  
  
  
  
  #box{  
  
  
  
      width:500px;height:400px;  
  
  
  
      display:table;  
  
  
  
      text-align:center;  
  
  
  
      border:1px solid #d3d3d3;background:#fff;  
  
  
  
  }  
  
  
  
  #box span{  
  
  
  
      display:table-cell;  
  
  
  
      vertical-align:middle;  
  
  
  
  }  
  
  
  
  #box img{  
  
  
  
      border:1px solid #ccc;  
  
  
  
  }

演示地址

#p#

方法二：

标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

代码如下：

 
 
 
 
  
  
  
   
  
  
  
   
  
  
  
       
  
  
  
      方法2 - 未知高度的图片垂直居中 - www.cleanthem.com 
  
  
  
   
  
  
  
   
  
  
  
  body {  
  
  
  
      height:100%;  
  
  
  
  }  
  
  
  
  #box{  
  
  
  
  width:500px;height:400px;  
  
  
  
  display:table-cell;  
  
  
  
  text-align:center;  
  
  
  
  vertical-align:middle;  
  
  
  
  border:1px solid #d3d3d3;background:#fff;  
  
  
  
  }  
  
  
  
  #box img{  
  
  
  
  border:1px solid #ccc;  
  
  
  
  }

在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。

方法3 - 未知高度的图片垂直居中 - www.cleanthem.com
body {
height:100%;
}
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box p{
width:500px;height:400px;
line-height:400px; /* 行高等于高度 */
}
/* 兼容标准浏览器 */
#box p:before{
content:"."; /* 具体的值与垂直居中无关，尽可能的节省字符 */
margin-left:-5px; font-size:10px; /* 修复居中的小BUG */
visibility:hidden; /*设置成隐藏元素*/
}
#box p img{
*margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}