Выравнивание с относительным и абсолютным позиционированием

Question

Как я могу отцентрировать синюю коробку внутри красной?Я вижу, что левая сторона синей рамки находится точно посередине красной рамки, но я бы хотел центрировать всю синюю область, а не ее левую сторону.Размеры коробок не постоянны.Я хочу выровнять независимо от размеров коробки.Пример игры с здесь .Спасибо!

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

Answer 1

Если вы можете изменить тег <span> на <div>

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

Тогда этот кусок CSS должен работать.

#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; }

Я думаю, что лучше использовать больше автоматизации для прилагаемого блока, так как при изменении размера контейнера контейнера потребуется меньше изменений.

Answer 2

Если вы собираетесь определить такие размеры (200px x 300px и 300px x 400px), вот как это можно отцентрировать:

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

#abs {
    position: absolute;
    width: 300px;
    height: 200px;
    border: 1px solid blue;
    margin: 49px 0 0 49px;
}

Answer 3

Вы можете добавить left:50px к #abs, если это все, что вы хотите ...

#abs {
    position: absolute;
    bottom: 15px;
    width: 300px;
    height: 200px;
    border: 1px solid blue;
    left:50px;
}

Answer 4

Вы можете проверить в моем решении здесь http://jsfiddle.net/NN68Z/96/

Я сделал следующее для CSS

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

        display: table-cell;
        vertical-align: middle;
    }

    #abs {
        display: block;
        bottom: 15px;
        width: 300px;
        height: 200px;
        border: 1px solid blue;
        margin: 0 auto;
    }

Answer 5

Это должно работать

#abs {
    position: absolute;
    left: auto;
    right: auto;
    bottom: 15px;
    width: 300px;
    height: 200px;
    border: 1px solid blue;
}