테이블에서 valign=middle 처럼 div에서 middle 정렬하는 방법

middle를 원하는 div에 display:table-cell;vertical-align:middle; 이렇게 입력하면

테이블의 valign=middle 처럼 정렬될것 같지 만 정렬되지 않는다

 

감싸고 있는 상위 div에 display:table 을 선언해주었을때 비로소 middle가 적용된다

 

valign정렬이라는것 자체가 table에 있는 속성이여서 그런지 css내에서도 table-cell 처럼 table단어가 들어가 있다 

<div style="display:table;width:200px;height:200px;border:1px solid #000000;">
  <div style="display:table-cell;vertical-align:middle;">00000</div>
</div>