我在另一个div(#edit)中有一个div(#containment).外部div较小.内部div的大小将由一些jQuery代码更改.
我想让内部div始终位于外部div的中心.
- <div id="edit"><div id="containment"></div></div>
- #edit {
- width:200px;
- height:200px;
- overflow:visible;
- margin-top:100px;
- background:gray;
- }
- #containment {
- width:500px;
- height:500px;
- opacity:0.5;
- background:red
- }
我怎样才能做到这一点？
解决方法
Updated Fiddle
- #containment{
- width:500px; height:500px; opacity:0.5; background:red;
- position : absolute;
- left: 50%;
- top: 50%;
- -webkit-transform: translate(-50%,-50%);
- -moz-transform: translate(-50%,-50%);
- -ms-transform: translate(-50%,-50%);
- transform: translate(-50%,-50%);
- }
通过使用transform,您不依赖于父容器的宽度和高度.
有关浏览器支持,请参阅caniuse.
左侧和顶部属性将元素的左上边缘设置为父级的中心.通过使用平移,它将X和Y位置移回其自身尺寸的50％.
您可以在developer.mozilla.org – transform上找到有关转换的更多信息
