Question

Let’s say I have:

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

I’d like the two texts to overlap directly at the same position (aligned center). Doesn’t matter which overlaps which.

Is it possible to do this with CSS?

The closest I can get is:

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

But this results in one above (vertically) the other, and not centered.

Thanks in advance.

Answer 1

Add top: 0; width: 100% to the inner div:

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

I’m not sure what width: 0 was doing on the outer div, so I removed it.

See: http://jsfiddle.net/thirtydot/Xprtd/