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

편집

수직 중간에 요소를 정렬하는 디스플레이 래퍼 설정이 필요한 것으로 보인다

: 테이블; 내부 div를 display로 설정 : 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}