Alignment with relative and absolute positioning

css, css-position, html

Solution

If you're able to change the `<span>` tag to a `<div>`

<div id="rel">
    <div id="abs">Why I'm not centered ?</div>
</div>

Then this piece of CSS should work.

#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }

#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }

I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.

Problem

How could I center the blue box inside the red one ? I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks ! HTML: ``` <div id="rel"> <span id="abs">Why I'm not centered ?</span> </div> ``` CSS: ``` #rel { position: relative; top: 10px; left: 20px; width: 400px; height: 300px; border: 1px solid red; text-align: center; } #abs { position: absolute; bottom: 15px; width: 300px; height: 200px; border: 1px solid blue; } ```

Original source