Css I'；我试着把两个分区放在另一个分区的中间
是我正在处理的样本。如果可能的话，我不想使用任何javascript，如果绝对需要，没有其他可能的解决方案，我会使用jQuery 我试图居中的3个内分区就是一个例子。最终的结果是，这些都是由脚本生成的，所以我不知道在.circle类中边距使用负px大小的宽度或高度 我愿意更改div的结构，但我正在寻找干净简单的东西，尽管我宁愿更改结构也不愿使用javascript FF4、Safari（iOS）/Chrome、IE9是我的最终目标 编辑： 这是我想要的最终结果，但它使用jquery 丹的回答也会起作用。它让生成脚本承担计算负边距的责任。我认为这最终是可以接受的，但我希望我能提供的只是所需的大小，而不是来自生成脚本的任何定位相关信息 @三十点-现在没有。我在手工编码。最终，这将由PHP或c生成，具体取决于我的服务器平台。Center withCss I'；我试着把两个分区放在另一个分区的中间,css,positioning,Css,Positioning,是我正在处理的样本。如果可能的话，我不想使用任何javascript，如果绝对需要，没有其他可能的解决方案，我会使用jQuery 我试图居中的3个内分区就是一个例子。最终的结果是，这些都是由脚本生成的，所以我不知道在.circle类中边距使用负px大小的宽度或高度 我愿意更改div的结构，但我正在寻找干净简单的东西，尽管我宁愿更改结构也不愿使用javascript FF4、Safari（iOS）/Chrome、IE9是我的最终目标 编辑： 这是我想要的最终结果，但它使用jquery 丹的回答也会
您不需要提前知道宽度，只要它们是明确设置的。在与尺寸相同的位置生成负边距：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.container
{
position: relative;
width: 500px;
height: 500px;
border: 1px solid yellow;
}
.circle
{
position: absolute;
-moz-border-radius: 100%;
border-radius: 100%;
top: 50%;
left: 50%;
}
.white
{
border: 1px solid White;
}
body
{
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="circle white" style="width: 100px; height: 100px; margin-top:-50px; margin-left: -50px"></div>
<div class="circle white" style="width: 200px; height: 200px; margin-top:-100px; margin-left: -100px"></div>
<div class="circle white" style="width: 400px; height: 400px; margin-top:-200px; margin-left: -200px"></div>
</div>
</body>
</html>
无标题页
.集装箱
{
位置：相对位置；
宽度：500px；
高度：500px；
边框：1px纯黄色；
}
圆圈
{
位置：绝对位置；
-moz边界半径：100%；
边界半径：100%；
最高：50%；
左：50%；
}
白色
{
边框：1px纯白；
}
身体
{
背景色：黑色；
}
$(".circle").each(function(){
$(this).css({top: -$(this).height()/2, left: -$(this).height()/2 });
});
演示：对。但是它们是基于HTML元素的。。内联。@Kon为真，但另一个问题是OP使用了特定的顶部边距。看看他的JSFIDLE，你就会明白我的意思。你的代码会在居中的过程中覆盖这些边距。这只对水平居中有帮助-你忽略了问题的一半；垂直居中。@Kon这将适用于宽度（我认为，.center类目前绝对处于位置），但适用于高度。@Matt，如果您添加了该怎么办！重要信息：内联设置的上边距，然后不覆盖。：）@三十点，对不起。。我在问题中没有看到任何关于垂直居中的内容。啊，好吧，忽略这个。
“这些都是由脚本生成的”