Расположите динамическую коробку в центре + снизу

Question

http://pastehtml.com/view/bfzerlo1m.html

Как мне расположить красную коробку в ЦЕНТРЕ + в ДНЕ оранжевого div?

Высота и ширина красного поля являются динамическими и отличаются от коробки к коробке.

(он должен работать во всех браузерах, включая IE7 + IE8)

Answer 1

HTML

<DIV class="wrapper"><div class="redbox"></div></div>

CSS

.wrapper{
  position: absolute;
  bottom: 0; left: 0; right: 0;
}
.redbox{
  margin: 0 auto;
}

Answer 2

Решение SpaceBeers кажется хорошим - или другой вариант:

http://jsfiddle.net/yPAey/

Answer 3

Может быть, вы можете сделать так:

HTML

<div style="" class="parent">     
    <div class="child-wrap">         
        <div class="child">center me...</div>     
    </div>     
</div>

CSS:

.parent{
    width:180px;
    height:180px;
    position:relative;
    background:orange;
}
.child-wrap{
    position:absolute;
    top:50%;
    left:50%;
}
.child{
    background:red;
    top:-50%;
    margin-left:-50%;
    position: relative;
    float: left;
}

http://jsfiddle.net/FQsuU/

Answer 4

Это ваш код с красным прямоугольником в центре:

http://jsfiddle.net/spacebeers/nyndk/1/

Я выровнял контейнер снизу (синим цветом), а затем центрировал красный прямоугольник там.

Answer 5

Чтобы учесть переменную ширину в красном поле, добавьте еще один div-оболочку вокруг красного поля ширины 'position: absolute' и 'bottom: 0' и 'width: 100%' - затем удалите позицию: absolute из красное поле, позволяющее центрироваться с полем 'auto: 0 auto'

.wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.redbox {
    height: ?px;
    width: ?px;
    margin: 0 auto;
}