如何让图片居中显示。让图片只适应居中。

方法一

• margin设为auto，对浮动元素或绝对定位元素无效;
• text-align:center 只能对图片，按钮文字等行内元素进行水平居中;（ie6,7中能对任何元素进行水平居中）
• 已知固定宽高

.out{
    width:200px;
    height:200px;
    border:1px solid red;
    position:relative;
}
.inner{
    width:100px;
    height:100px;
    background:red;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-50px;
    margin-left:-50px;
}

<div class="out">
    <div class="inner"></div>
</div>

---

方法二

.out{
    width:200px;
    height:200px;
    border:1px solid red;
    position:relative;
}
.inner{
    width:100px;
    height:100px;
    background:red;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;

}

<div class="out">
    <div class="inner"></div>
</div>

---

方法三
.使用浮动配合相对定位进行水平居中，不需要固定的宽度。但是需要一个多余的元素包裹要居中的元素。

.out{
    width:200px;
    height:200px;
    border:1px solid red;
}

//浮动居中的方法需要有这么一个包裹元素，需要浮动的就是这个元素
.wraper{
    //在这个包裹元素上进行浮动，让他自适应内容宽度
    float:left;            
    position:relative;
    left:50%;              //相对定位到父元素宽度一半的地方
    clear:both;
}
.child{
    border:1px solid red;
    position:relative;
    left:-50%;
    white-space:nowrap;
}

<div class="parent">
    <div class="wraper">
        <div class="child">居中</div>
    </div>
</div>

---

方法四

• 下面是相对于浏览器居中代码，也就是说浏览器视口变化，图片也会相对其进行居中调整
  我将其用在pc端

// 不需要设置 position:relative
.animate{position:absolute;top:50%;left:50%;margin:-100px 0 0 -150px; width:300px; height:200px; z-index:99;}