我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。
我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点?
我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。
我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点?
当前回答
如果元素具有宽度和高度,则此解决方案有效
.包装器{宽度:300px;高度:200px;背景色:番茄;位置:相对;}.内容{宽度:100px;高度:100px;背景色:深蓝色;位置:绝对;顶部:0;右:0;底部:0;左:0;边距:自动;}<div class=“wrapper”><div class=“content”></div></div>
其他回答
我首选的定心方法:
position: absolute;
margin: auto;
width: x%
绝对块元素定位保证金自动左/右、上/下相同
一个JSFiddle在这里。
<body><div style=“position:absolute;left:50%;”><div style=“位置:相对;左:-50%;边框:红色虚线1px;”>我是一些中心收缩以适应内容<br/>翻土;翻土</div></div></body>
我只是想补充一句,如果有人想用一个div标记来完成,那么这里是解决方法:
宽度为900px。
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
在这种情况下,应该事先知道宽度。
这是对我们有用的其他答案的混合:
.el {
position: absolute;
top: 50%;
margin: auto;
transform: translate(-50%, -50%);
}
Sass/Compass版本的先前响应解决方案:
#content {
position: absolute;
left: 50%;
top: 50%;
@include vendor(transform, translate(-50%, -50%));
}