html - 相対的および絶対的なポジショニングとの位置合わせ

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

それがあなたが望むすべてであるならば、あなたは追加left:50pxすることができ#absます...

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

Answer 3

そのような寸法（200pxx300pxおよび300pxx400px）を定義する場合、中央に配置する方法は次のとおりです。

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