Вложенные квадраты с использованием HTML и CSS

Необходимо быть более конкретным, но вот простой пример того, как.

HTML

<div id="wrap">
    <div><div><div><div><div><div><div><div><div><div>
    </div></div></div></div></div></div></div></div></div></div>
</div>

CSS

#wrap{
    height:500px;
    width:500px;
}

div {
    width:90%;
    height:90%;
    border:1px solid black;
}

Изменить на основе новой информации

Вертикальные выравнивающие элементы к середине, по-видимому, требуют установки обертки для отображения: table; и установка внутренних разделов для отображения: table-cell; и выравнивание по вертикали: среднее. Тем не менее, это приводит к тому, что цвета заднего плана все принимают нижний цвет каждой ячейки при вложенности... поэтому я просто просто позиционирую вместо вертикального выравнивания:

HTML

<div id="wrap"> 
    <div id="a" class="z"><div id="b" class="z"><div id="c" class="z"><div id="d" class="z"><div id="e" class="z"><div id="f" class="z"><div id="g" class="z"><div id="h" class="z"><div id="i" class="z"><div id="j" class="z">
        </div></div></div></div></div></div></div></div></div></div>
</div>

CSS

div {
    width:90%;
    height:90%;
    margin:0 auto;
}

#wrap{
    width:500px;
    height:500px;
    position:relative;
}

.z {
    position:absolute;
    top:5%;
    left:5%;
}

#a{background-color:#aaa}
#b{background-color:#999}
#c{background-color:#888}
#d{background-color:#777}
#e{background-color:#666}
#f{background-color:#555}
#g{background-color:#444}
#h{background-color:#333}
#i{background-color:#222}
#j{background-color:#111}