子孙元素宽度大于祖先元素时居中方法

当子孙元素的宽度小于祖先元素的宽时，如何让子孙元素居中，大家应该都知道。

　　效果如下图：

　

但是如果子孙元素的宽度大于祖先元素的宽度时，还用之前的样式，子孙元素和祖先元素左边对齐，如下图

（适用的场景：广告图宽度大于浏览器窗口的宽度，并需要居中显示图片时）

　　

下面的方法可以让子孙元素相对于祖先元素居中：

首先要在子孙元素和祖先元素之间嵌套一层.parnet,

　　1.利用css3中的display:flex

　　.parent{display:flex;justify-content:center;..}

　　.child{flex-shrink:0}

　　2.利用定位position和tanrsform

　　.child{position:relative;left:50%;transform:translateX(-50%)}

　　3.利用定位position和margin

　　.parent{1920px;display: block;position: relative;left: 50%;margin-left: -960px;}

效果如下：

　　　　如有错误请各位大佬指正。