我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。

我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。

.center {
  left: 50%;
  bottom: 5px;
}

我怎样才能做到这一点?


当前回答

您还可以创建中间件div#centered框,以绝对值、左财产和右财产居中,不带width属性,然后将主内容div设置为其具有display:inline-block框的子项,并使用为其中间件父框设置的text-align:center将其居中

#集装箱{位置:相对;宽度:300px;高度:300px;边框:实心1px蓝色;颜色:#DDDDD;}#居中{位置:绝对;文本对齐:居中;边距:自动;顶部:20px;左:0;右:0;边框:1px红色虚线;填充:10px 0px;}#居中>div{边框:实心1px红色;显示:内联块;颜色:黑色;}<div id=“container”>你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界<div id=“center”><div>你好世界<br/>我不知道我的宽度<br/>但我还是绝对的!</div></div></div>

其他回答

我使用了类似的解决方案:

#styleName {
    position: absolute;
    margin-left: -"X"px;
}

其中“X”是要显示的div宽度的一半。它适用于所有浏览器。

由于我不想更改容器/包装器元素的样式,所以这些解决方案都不适合我。这段代码对我有用:

position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;

尽量不要使用CSS的阴暗面。避免使用负值作为边距。我知道有时候你会被迫做一些糟糕的事情,比如左边距:-450px,但你可能会做一些右边距:450px。这只是我的工作方式。

这适用于垂直和水平:

#myContent{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

如果要使父对象成为元素中心,请设置父对象的相对位置:

#parentElement{
    position: relative
}

对于垂直居中对齐,请设置元素的高度。感谢劳尔。如果要使父对象成为元素中心,请将父对象的位置设置为相对位置

这里有一个有用的jQuery插件来实现这一点。我在这里找到的。我不认为纯粹使用CSS是可能的。

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height();
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total + "px", "top":
h_total + "px"};
            el.css(css)
    });
};