图片垂直居中

图片在容器中垂直居中，有几种方式：

1、放在table里 （最简单直接的方法）

<table style="height:200px;border:1px solid #000;">
<tr>
<td>
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</td>
</tr>
</table>

 

 

2、加一个0宽度、100%高度的图片。并且两张图都设为：vertical-align:middle

<div style="height:200px;border:1px solid #000;">
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" style="vertical-align:middle;"/>
    <img src="" style="height:100%;width:0px;vertical-align:middle;"/><!-- 这里加一个0宽度、100%高度的图片 -->
</div>

 下面这个最好！！！

<style type="text/css">
#aa{width:800px;height:800px;border:1px solid #000;text-align:center;}
i{display:inline-block;width:0px;height:100%;vertical-align:middle;}
img{vertical-align:middle;} 
</style>
<div id="aa"><img src="http://img1.3lian.com/img13/c3/87/91.jpg"/><i></i></div>

 改进版（不再需要多余标签）：（不兼容ie7）2015-10-15

<style type="text/css">
.img-middle{width:100%;height:800px;border:1px solid #000;text-align:center;}
.img-middle:after {content:'';display:inline-block;width:0px;height:100%;vertical-align:middle;overflow:hidden;}
.img-middle > img{vertical-align:middle;} 
</style>
<div class="img-middle"><img src="http://img1.3lian.com/img13/c3/87/91.jpg"/></div>

http://www.cnblogs.com/dearxinli/archive/2013/06/26/3156504.html 　　图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

 

 

暂时存放这里，还需要改。已经做好旋转，还没做好自适应：（图片旋转90度自适应）　　2015-10-16

<script type="text/javascript">
$(function(){
    $("img").click(function(){
        var _img = $(this);
        if( _img.hasClass("deg90") ){
            _img.removeClass("deg90");
        }else{
            _img.addClass("deg90");
        }
        //$(this).toggleClass("deg90");
        console.log($(this).width());
    });
});
</script>
<style type="text/css">
html,body{width:100%;height:100%;margin:0;padding:0;}
.boxs{position:relative;width:500px;height:800px;border:2px solid #000;box-sizing:border-box;}
.box{width:100%;height:100%;border:1px solid #fff;text-align:center;}
.box:after {content:'';display:inline-block;width:0px;height:100%;vertical-align:middle;overflow: hidden;}
.box > img{vertical-align:middle;width:100%;}
.box .deg90{
    transform:rotate(90deg);        transform-origin:50% 50%;
    -ms-transform:rotate(90deg);    -ms-transform-origin:50% 50%;/* Internet Explorer */
    -moz-transform:rotate(90deg);    -moz-transform-origin:50% 50%;/* Firefox */
    -webkit-transform:rotate(90deg);-webkit-transform-origin:50% 50%;/* Safari 和 Chrome */
    -o-transform:rotate(90deg);        -o-transform-origin:50% 50%;/* Opera */
}
</style>
<div class="box"><img src="http://id.topit.me/d/4e/5e/1194980120f565e4edo.jpg" class="deg0"/></div>

 

 

 

 

 

 

3、单个图片水平垂直居中 一淘使用方案

<style type="text/css">
.box {
        /*非IE的主流浏览器识别的垂直居中的方法*/
        display: table-cell;
        vertical-align:middle;

        /*设置水平居中*/
        text-align:center;

        /* 针对IE的Hack */
        *display: block;
        *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
       /* *font-family:Arial;防止非utf-8引起的hack失效问题，如gbk编码*/

        width:200px;
        height:200px;
        border: 1px solid #000;
}
.box img {
        /*设置图片垂直居中*/
        vertical-align:middle;
}
</style>
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

 

 

4、在图片和容器高度，都是已知的情况下，计算margin-top （不推荐）

下图是容器高度200px，如片高度95px

<div style="height:200px;border:1px solid #000;">
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" style="margin-top:52.5px;"/>
</div>

 

<style type="text/css">
.boxs{position:relative;background:#9cf;width:500px;height:500px;}
.box {  
    background:#999;
    position: absolute;  
    width: 300px;height: 200px;  
    top: 50%; left: 50%;  
    margin-left: -150px; /* (width + padding)/2 */  
    margin-top: -100px; /* (height + padding)/2 */  
}
</style>
<div class="boxs">
    <div class="box"></div>
</div>

 

5、绝对居中（参考）　　2016-6-15

<style type="text/css">
.main{position:relative;width:400px;height:400px;background:#aaa;}
.sub{position:absolute;width:200px;height:200px;background:#000;margin:auto;left:0;right:0;top:0;bottom:0;}
</style>
<div class="main">
    <div class="sub">绝对居中</div>
</div>

 

 

 

http://www.cnblogs.com/lucky-snow/p/4536171.html 　　垂直居中的几个测试（还没看）　　2015-10-20

http://www.cnblogs.com/var-foo-bar/p/4980225.html 　　介绍一种css水平垂直居中的方法（非常好用！——还没试）2015-11-20

http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html　　CSS实现垂直居中的5种方法

http://www.webhek.com/vertical-align/　　竖向居中

http://www.w3cfuns.com/notes/22200/8e4f0179eb3525896834d82787413459.html　　对垂直居中的探索　　2016-4-18

http://www.cnblogs.com/moustache/archive/2016/05/13/5488207.html　　常用CSS居中　　2016-5-12

...