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

Question

Просто используя HTML и CSS, существует способ создания вложенных квадратов. Другими словами, один большой квадрат A и другой квадрат внутри A (назовем это B), а другой квадрат внутри B и т. Д. И так далее, примерно так же 10 раз. Квадраты должны быть центрированы внутри каждого квадрата. также каждый квадрат должен быть разных цветов. спасибо!

Answer 1

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

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-cell; и выравнивание по вертикали: среднее. Однако, это приводит к тому, Backround цвета всем взять цвет нижней ячейки, когда вложен ... так что я просто только абсолютное позиционирование вместо вертикального выравнивания:

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}