我想在窗口的中心放置一个div（with position:absolute；）元素。但我在这样做时遇到了问题，因为宽度未知。
我尝试了以下CSS代码，但它需要调整，因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点？
当前回答
您可以将图像放置在一个div中，添加一个div id，并让该div的CSS具有文本align:center:
HTML格式：
<div id="intro_img">
<img src="???" alt="???">
</div>
CSS:
#intro_img {
text-align: center;
}
其他回答
这里有一个有用的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 class="parent">
<div class="child">
<!-- content -->
</div>
</div>
CSS:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
演示：http://jsbin.com/rexuk/2/
它在Google Chrome、Firefox和Internet Explorer 8中进行了测试。
Flexbox可用于对绝对定位的div。
display: flex;
align-items: center;
justify-content: center;
.相对{宽度：275px；高度：200px；背景：皇家蓝；颜色：白色；边距：自动；位置：相对；}.绝对块{位置：绝对；高度：36px；背景：橙色；填充：0px 10px；底部：-5%；边框：1px实心黑色；}.居中文本{显示：柔性；对齐内容：中心；对齐项目：居中；盒子阴影：1px 2px 10px 2px rgba（0、0、0和0.3）；}<div class=“relative center text”>相对块（Relative Block）绝对块</div></div>
HTML格式：
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
我知道我已经给出了答案，我之前的答案和其他人的答案都很好。但我在过去使用过这个，它在某些浏览器和某些情况下效果更好。所以我想我也会给出这个答案。我没有“编辑”我之前的答案并添加它，因为我觉得这是一个完全独立的答案，我提供的两个答案并不相关。
我知道这个问题已经有了一些答案，但我从来没有找到一个能在几乎所有的类中都适用的解决方案，它也很有意义，而且很优雅，所以这里是我经过调整后的看法：
.容器{位置：相对；}.container.cat链接{位置：绝对；左：50%；顶部：50%；变换：translate3d（-50%，-50%，0）；z指数：100；文本转换：大写；/*强制CSS将其视为文本，而不是纹理，这样就不会出现更模糊的错误*/背景色：白色；}.色块{高度：250px；宽度：100%；背景色：绿色；}<div class=“container”><a class=“cat link”href=“”>类别</a><div class=“color block”></div></div>
这是说给我一个顶部：50%，左侧：50%，然后在X/Y轴上变换（创建空间）到-50%的值，在某种意义上“创建镜像空间”。
因此，这会在div的所有四个点上创建一个相等的空间，它始终是一个长方体（有四条边）。
这将：
工作时不必知道父对象的高度/宽度。致力于响应。在X轴或Y轴上工作。或者两者兼而有之，就像我的例子一样。我不能想出一个不起作用的情况。
