CSS：相对定位的div

Question

我有一个外部容器＆＃34; div我想要定位内部div，而div又包含垂直和水平居中的文本（以＆＃34; p＆＃34;元素的形式）。它看起来像这样：

蓝色部分：外部容器的部分

绿色：＆＃34;内部div，＆＃34;正如你所看到的，它的黑色文字确实是垂直和水平居中的。

我用相对定位完成了这个：

<div class="container" id="c">
        <div id="node1" class="node" style="position: relative; top: 50px; left: 50px;"><p class="numtext" id="node1text">1</p></div>
        <div id="node2" class="node" style="position: relative; top: 100px; left: 100px;"><p class="numtext" id="node2text">2</p></div>
        <div id="node3" class="node" style="position: relative; top: 150px; left: 150px;"><p class="numtext" id="node3text">3</p></div>
</div>

我使用的CSS的相关部分如下：

div.container {
    margin-left: auto;
    margin-right: auto;
    position:relative;
    overflow-y: auto;
}

div.node {
    border-radius: 50%;
    text-align: center;
}

p.numtext {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height:100%; /* This vertically centers the text in the parent div, found on stackoverflow */
}

到目前为止，这么好。然而，问题是，如果我删除中间＆＃34; 2＆＃34;节点，＆＃34; 3＆＃34;的位置节点也改变了！ （同样，如果我删除＆＃34; 1＆＃34;节点，则另外2个节点的位置会发生变化。）它会向上和向左移动，但不会一直向前移动到2。见图：

然而，代码中的其他一切都是完全相同的！所以我认为相对定位与它有关，我是对的;如果我改变了（例如，div行现在读起来像：）

<div id="node1" class="node" style="position: absolute; top: 50px; left: 50px;"><p class="numtext" id="node1text">1</p></div>

我看到了一些非常不同的东西：

实际上，这看起来更接近代码＆＃34;应该＆＃34;输出，因为节点只是分开一个看起来更像50像素的小距离（作为参考，每个节点的大小是75.6px）。但是，很明显，文本的垂直对齐方式是不可能的，并且有充分的理由 - 节点[绿色]现在绝对定位，因此文本位于相对的位置，＃34;现在相对于容器[淡蓝色]而不是节点定位（我不认为我正确地解释了这一点，但我所指的是类似于这种情况，我认为：{{3} }）。

所以，我认为我需要保持所有三个元素（外部div，内部div和内部文本）相对定位，但我不知道如何制作内部divs＆＃39;职位相互独立。有什么想法吗？

我也倾向于抛弃相对定位的想法，绝对定位内部div和文本，但我仍然需要文本在绿色圆圈内居中（但请注意，圆圈也可以改变大小[和文本以及它们]，文本可能有多个数字，也许我甚至可能希望稍后切换到不同的字体，所以确保垂直对齐似乎是一个难题。）

Answer 1

如果我错了，请纠正我，但这不是你要做的事情吗？

http://jsfiddle.net/h2h6qro4/

.container {
    position: relative;
    width: 300px; /* for demo only */
    margin: 0 auto;
}

.circle {
    position: absolute;
    width: 60px; /* whatever your circle size */
    line-height: 60px; /* whatever your circle size */
    text-align: center;
    border-radius: 50%;
    background: #a0f4b6;
}

.circle-1 {
    top: 50px;
    left: 50px;
}

.circle-2 {
    top: 100px;
    left: 100px;
}

.circle-3 {
    top: 150px;
    left: 150px;
}