CSS图片垂直居中

参考：CSS图片垂直居中方法整理集合

标准的：

<!-- 
* {margin:0;padding:0}
div {
    width:500px;
    height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    display:table-cell;
    text-align:center;
    vertical-align:middle
    }
div p {
    position:static;
    +position:absolute;
    top:50%
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px
    }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div

标准浏览器下另类方法:

<!-- 
body {
    margin:0;padding:0
    }
div {
    width:500px;
    height:500px;
    line-height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    text-align:center;
    margin:auto
    }
div p {
    position:static;
    +position:absolute;
    top:50%
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px;
    vertical-align:middle
    }
p:after {
    content:".";font-size:1px;
    visibility:hidden
    }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div

标准浏览器严格型申明下：

<!-- 
* {margin:0;padding:0}
div {
    width:500px;
    height:500px;
    line-height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    text-align:center;
    }
div p {
    position:static;
    +position:absolute;
    top:50%;
    vertical-align:middle
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px;
    vertical-align:middle
    }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div

利用字体大小的方法：

* {margin:0;padding:0;}
div {
    width:500px;text-align:center;border:1px solid #f00;line-height:500px;
    height:500px;font-size:500px
    }
*>div{
    font-size:12px
    }
div img {
    vertical-align:middle
    }
</style>
<div>
<img src="http://www.google.com/intl/en/images/logo.gif" />
</div

display:inline-block 方法：

div {
    display:table-cell;
    height:300px;
    width:500px;
    text-align:center;
    border:1px solid #000;
    vertical-align:middle
    }
</style>
<!--[if IE]>
<style type="text/css">
i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
img {
    vertical-align:middle
    }
</style>
<![endif]-->
<div>
<i></i>
    <img src="http://www.baidu.com/img/logo.gif" alt=""/>
</div

最简单当然是背景图片的方法：

* {margin:0;padding:0;}
div {
    width:500px;border:1px solid #f00;
    height:500px;
    background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
    }
</style>
<div>
</div

 

 

 

 

<!-- 
* {margin:0;padding:0}
div {
    width:500px;
    height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    display:table-cell;
    text-align:center;
    vertical-align:middle
    }
div p {
    position:static;
    +position:absolute;
    top:50%
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px
    }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div