如何使用CSS直接重叠两个文本元素？

Question

让我说我有：

<div>
  hello
  <div>hello</div>
</div>

我希望这两个文本直接在同一位置（对齐的中心）重叠。无关紧要哪个重叠。

是否可以使用CSS执行此操作？

我能得到的最接近的是：

<div style="position: relative; margin: 0 auto; text-align: center; width: 0">
  hello
  <div style="position: absolute; text-align: center">hello</div>
</div>

但是这导致一个在上面（垂直）另一个，而不是居中。

提前致谢。

Answer 1

将top: 0; width: 100%添加到内部div：

<div style="position: relative; margin: 0 auto; text-align: center">
    hello
    <div style="position: absolute; top: 0; width: 100%">hello</div>
</div>

我不确定width: 0在外div上做了什么，所以我删除了它。

请参阅： http://jsfiddle.net/thirtydot/Xprtd/

Answer 2

在浏览器IE，FF，Chrome中测试......

<div style="background:red;position: relative;text-align:center;width:100%;">
    <div style="color:Green;position:relative;">hello
        <div style="position:absolute;top:0;width:100%;">hello</div>
    </div>
</div>

Answer 3

将top:0px;样式添加到第二个div ...

Answer 4

尝试给它们相等的宽度，外部宽度：auto或者其他东西，内部 - 100％ 您还应该考虑左：0;顶部：0表示绝对定位的div。

Answer 5

第二个div的风格并不关心。

HTML

<div class="styleDiv">
  hello
  <div>hello</div>
</div>

CSS

.styleDiv {
    line-height: 4px; /* 0px if you want to overlaps completly */
    text-align: center;
}

然后，调整line-height