我想在窗口的中心放置一个div（with position:absolute；）元素。但我在这样做时遇到了问题，因为宽度未知。
我尝试了以下CSS代码，但它需要调整，因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点？
当前回答
这里有一个有用的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)
});
};
其他回答
HTML格式：
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
我知道我已经给出了答案，我之前的答案和其他人的答案都很好。但我在过去使用过这个，它在某些浏览器和某些情况下效果更好。所以我想我也会给出这个答案。我没有“编辑”我之前的答案并添加它，因为我觉得这是一个完全独立的答案，我提供的两个答案并不相关。
据我所知，对于未知的宽度，这是不可能实现的。
如果这在您的场景中有效，您可以绝对定位一个100%宽度和高度的不可见元素，并使用margin:auto和可能的垂直对齐将元素居中。否则，您将需要JavaScript来执行此操作。
<div style='position:绝对；左：50%；顶部：50%；转换：转换（-50%，-50%）'>此文本居中。</div>
这将使div中的所有对象居中，位置类型为static或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)
});
};
在寻找解决方案时，我得到了前面的答案，可以将内容以Matthias Weiler的答案为中心，但使用文本对齐：
#content{
position: absolute;
left: 0;
right: 0;
text-align: center;
}
它与谷歌Chrome和Firefox配合使用。
