可以设置图片object-position: contain~~

w3cplus的文章：[居中之美]（ http://www.w3cplus.com/collective-5.html ）

盒模型 so easy

给div加上text-align:center 不是就可以居中了吗

 <div>
    <img src="" />
</div>

CSS

 div{
    position:relative;
    width:100%;
}
div img{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    max-width:100%;
}

或许你可以试试这样子写

为什么一定是图片，而不是作为背景图片呢，作为背景图片的话， background-position:center; 就解决了啊……

如果你是要做很多动画效果的话，那就再议了，或许也可以用背景图片的方式，就是看其他动画的元素怎么去定义位置了。

绝对定位left:50%
然后再用margin-left图片宽度的一半

div 用 text-align:center;
然后img用 margin:0 auto;注意的是后面那个auto，前面那个0自定义

去看看张鑫旭大神博客，有各种居中。w3cplus上也有各种居中文章。

补充一点 不需要给元素设置宽度100% 默认块级元素就是100%的

方法1， img中设置样式 <img src="xxx" style="display: block; margin: 0px auto; vertical-align: middle;">
方法2， div中设置样式 <div style="text-align:center;">
... 其实有很多种方法

是垂直并且水平居中把，解决方案需要css + js

简单css的水平垂直居中

还记得当年的固定大小的任意元素垂直居中于父元素吗？

 

 

 

 <div id="father">
  <div id="son"></div>
</div>

 #father{
    width:100%;
    height:100%;
    position:relative;//父相对
}

#son{
    width:400px;
    height:200px;

    position:absolute;
    top:50%;
    left:50%;

    /*关键:让点回去*/
    margin-left: -200px;
    margin-top: -100px;
}

复杂的但是原理一样

这里如果son的宽高不固定怎么办？不知道这是不是题主要问的。

css的代码需要去掉margin，然后使用js获取。

 

 

 

 <div id="father">
  <div id="son"></div>
</div>

 #father{
    width:100%;
    height:100%;
    position:relative;//父相对
}

#son{
    width:400px;
    height:200px;

    position:absolute;
    top:50%;
    left:50%;

    /*去掉这里，使用js获取
    margin-left: -200px;
    margin-top: -100px;

    */
}

js代码

 $(function(){
var height = $("#son").width();
var height = $("#son").height();

$("#son").attr("margin-top",(-height/2)+"px");
$("#son").attr("margin-left",(-width/2)+"px");
});

特别提醒

如果你的son是一个image，您需要延迟执行上面的代码，因为获取到的图片长宽需要等待图片下载完成后再来计算

代码如下

 

 

 

 <div id="father">
  <img id="son" src="http://XXXX.jpg" />
</div>

css代码不变，js代码如下

 $(function(){
  $("#son").on("load",function(){

    /*这里的图片获取长宽不再是这个样子的，需要修改*/
    //var height = $("#son").width();
    //var height = $("#son").height();


    /*请自己查找把。*/
    $("#son").attr("margin-top",(-height/2)+"px");
    $("#son").attr("margin-left",(-width/2)+"px");


    })
});

提示

如果是图片。请自行查找如何获取图片的 原始大小