我想在另一个div中居中

Here is the sample I'm working with. I would like to not use any javascript if possible, and if absolutely required with no other solutions possible I would use jQuery.

这是我正在研究的样本。如果可能的话，我不希望使用任何javascript，如果绝对需要没有其他解决方案，我将使用jQuery。

The 3 inner divs I'm trying to center are an example. In the end result, these are generated by script so I wont know the width or height to use a negative px size for the margin's in the .circle class.

我要讲的3个内在的divs就是一个例子。最终结果是，这些都是由脚本生成的，所以我不知道在.circle类中使用负px大小的宽度或高度。

I'd be willing to change the structure of the div's but I'm looking for something clean and simple, though I would rather change the structure than use javascript.

我愿意改变div的结构，但是我想要一些简洁的东西，尽管我宁愿改变结构也不愿使用javascript。

FF4, Safari(iOS)/Chrome, IE9 are my end targets.

FF4, Safari(iOS)/Chrome, IE9是我的最终目标。

edit:

编辑:

This is the end result I would like, but its using jquery.

这是我想要的最终结果，但是它使用的是jquery。

Dan's answer would work as well. It puts the onus on the generating script to calculate the negative margins. This would be acceptable in the end I think but I was hoping that all I would have to provide would be the desired size and not any positioning related information from the generating script.

丹的回答也可以。它把计算负边距的责任放在生成脚本上。我认为这最终是可以接受的，但我希望我所能提供的只是所需的大小，而不是来自生成脚本的任何位置相关信息。

@thirtydot - Right now, none. I'm coding by hand. in the end this would be generated by either PHP or c# depending on my server platform.

@thirtydot -现在，没有。我手工编码。最后，这将由PHP或c#根据我的服务器平台生成。

3 个解决方案

#1

Generate negative margins in the same place as the sizes:

在与尺寸相同的地方产生负利润:

<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>

#2

Center with margin: 0 auto.

中心与边缘:0自动。

You don't need to know the width's ahead of time, as long as they are set explicitly.

您不需要提前知道宽度，只要它们是显式设置的。

#3

Well if it comes down to it, here's some jQuery action to get the job done.

如果归结到这一点，这里有一些jQuery动作来完成这项工作。

$(".circle").each(function(){
    $(this).css({top: -$(this).height()/2, left: -$(this).height()/2 });
});

Demo: jsfiddle.net/Marcel/7ucme

演示:jsfiddle.net/Marcel/7ucme

#1