Центрирование слоя внутри слоя

[TorchTT]

Подскажите, пожалуйста, как центрировать слой произвольного размера внутри другого слоя?

Изначально:

Как должо быть:

[ablay2009]

Можно позиционировать элемент и задать ему отрицательные отступы. Представим, что у нас два блока #div1 и #div2, #div2 лежит внутри #div1:

#div1{
     width:250px;
     height:250px;
     background:green;
     position:relative;
}

#div2{
     width:200px;
     height:200px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-100px;
     margin-left:-100px
}

Вот и все. Но вы должны понимать, что такой трюк пройдет только если ширина и высота обоих блоков заранее известна.

Edited February 7, 2012 by ablay2009

[bob_24]

Если размеры внешнего блока и внутреннего не известны то так http://jsfiddle.net/Nzza2/

[ablay2009]

Если размеры внешнего блока и внутреннего не известны то так http://jsfiddle.net/Nzza2/

Ссылка у меня не работает. И вообще какие вы счастливые люди, что на jsfiddle можете писать, а то я с планшетником задолбался уже

[bob_24]

ablay2009, спешл фо ю

<div class="outer">
    <div class="before"></div
    ><div class="inner">     
        Центрированный<br>блок
    </div>
</div>

.outer{
    height:200px;
    border:1px solid black;
    text-align:center;
    }
.before {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    }     
.inner {
    display: inline-block;
    vertical-align: middle;
    background:orange;
    }

хотя если не нужна поддержка ие7, то вместо .before можно сделать .outer:before

Edited February 7, 2012 by bob_24

[TorchTT]

Благодарю всех за ответы)

Вопрос решен.

Тему можно закрывать.