图片居中

在写banner时，使用图片，居中

<!--main-->
        <div class="header_banner">
            <div class="header_img">
                <!--<img src="img/index/index_banner.jpg" />-->
                <div class="iphonediv">
                    <img src="img/index/index_iphone.png" class="index_iphone" />
                    <p>iPhone客户端</p>
                </div>
                <div class="androiddiv">
                    <img src="img/index/index_android.png" class="index_android" />
                    <p>Android客户端</p>
                </div>
            </div>
        </div>

一会要1366px 一会要全屏  全屏又不能100%，最小1366px 图片上的内容还有居中  。。。

然后就(⊙o⊙)了

这个banner的思路就是希望屏幕1920px 铺满，小于1920的屏幕取中间部分，图片中间重点文字 ；

那么就是缩进左右两边 ，大于1920px的图片居中 并且其他位置为灰色，也就是最大那层不能给宽度，给背景颜色 ；

要定位两个客户端框，所以要找一个父元素固定大小，那么就是把图 和两个框放在同一个父元素，宽度为1920px；

这样两个框就能放在想要的位置，并且不会因为屏幕大小而改变位置；

/*header_banner*/
.header_banner{
    position: relative;
    /* width: 1366px; */
    margin: auto;
    text-align: center;
    background: #f8f8f8;
     overflow: hidden;//当时就是少加这个。卡住了。准备用js写了。。。最后眼前一亮，加了解决
     min-width: 1366px;//不要根据屏幕改变而一直居中显示 和下文一直 不动
}

.header_img{
    background: #f5f4f4;
    background-image: url(../img/index/shouye2.jpg);
    background-repeat: no-repeat;
    height:580px ;
     width:1920px;
    margin: 0 auto;
    position:relative;
    left:50%;//根据屏幕大小一半定位
    margin-left:-960px;//根据图片大小一半反方向
  /*background-size: contain;*/

 
}