如何把一个大于父元素的div居中,并隐藏多余部分?

Question

 子元素居中,隐藏黄色部分,求问有哪些方法如中间的图片效果

Answer 1

定位。

父级应用相对定位position：relative；，子级应用绝对定位position：absolute；，并且用外边距应用负的子级宽度的一半（margin-left：-(子级宽度/2)单位），居上下位置和左右的方法相同。

并且父级还要应用溢出隐藏属性：overflow:hidden;。

代码如下：

.divFather { width:400px; height:500px; position:relative; overflow:hidden;}
.divSon { width:500px; height:300px; position:absolute; top:50%;left:50%; margin:-150px -250px;}

Answer 2

1、我不知道你为什么要这样做，没有实战的意义。你完全可以用两个同级元素来做这样的效果；margin或padding，z-index;如果想把他们做成一个整体，你可以在外面包裹一层，以免他们受影响；

2、你子元素在父元素中，想要两边都超过父元素，你就需要子元素脱离文档流，脱离当前的层级关系。用定位来做；

3、其它的我没想到了。

Answer 3

写好了:

.g-bd .m-workplace { width: 1200px; overflow: hidden; position: relative; margin: 0; padding: 0; }

.g-bd .m-workplace .box { position: absolute; left: -50%; margin-left:600px; width: 1616px; }

还有什么方法吗?

Answer 4

是不是父元素相对定位,子元素绝对定位.子元素left设置-50%,在向右父元素一半长度,可是写出来运行错误.是不是中间还要加个div