大图居中：

先看一下普通的居中：

代码为：

浏览器100%的时候显示为：

浏览器缩小时：

如图，当浏览器大小小于图片大小的时候，图片会贴靠在左边而不再移动。

我的理解是，当图片设置为居中，浏览器界面小于图片大小的时候，浏览器会挤住图片。因为图片小于浏览器的部分，浏览器不愿意收留图片多余的部分，哎图片这可怜的孩儿。当然这种情况我是看不下去的，所以，我强制让浏览器“收留”它。

代码修改为：

效果图为：

如图，浏览器缩小的时候，图片依然居中。（浏览器，你敢不收留它，废了你\）。

---

 

当然拿这个思路也就引出了淘宝著名的“双飞翼布局”。

简要说明一下双飞翼布局，它是当浏览器缩小的时候，中间栏随浏览器变化而变化。而侧栏不随浏览器变化而变化。

先看下效果图：

开始时候：

浏览器缩小的时候：

这种布局和上面的居中方式使用的方法基本差不多。一个字，悟。当然css3中有个方法可以简单实现这种

---

当然css3中有个方法可以简单实现这种。display:flex。称为“弹性盒子”这种只能ie9+

先看代码：

那代码来说，先给父类一个display:flex。然后给子类设置flex:n。

这种方法的实现思想是，如代码，子类有三个，都设置为，flex:1,意思是每个子类占父类三分之一。

用这种方法可以轻松实现双飞翼布局，如代码：

a,c设置固定宽度，b设置flex：1即可。

 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

by9.6

现阶段整理出来最好的：

1 /** 2  * Created by Administrator on 2016/9/6. 3  */ 4 $(function () { 5     6     var div=$("
      
"); 7     var content=div.clone(); 8     content.css({ 9         width:"960px",10         position:"relative",11         left:"50%"12     });13     var bak=div.clone();14     bak.css({15         position:"relative",16         left:"-960px",17         width:"1920px",18         height:"615px",19         background:"url(pic-big-v6.jpg)"20     });21     content.append(bak);22     var con=div.clone();23     con.css({24         width:"100%",25         overflow:"hidden"26     });27     con.append(content);28     $("body").append(con);29 });

三步：(说明：div1包围div2,div2包围div3,div3里面是背景图片)

　　①：div1: width:100%   overflow:hidden

　　②：div2: position：relative    left:50%

　　③：div3: 导入图片，设置图片的固定宽高，width和height。position:relative   left:-npx (n为图片的一半大小)