[HTML5 / CSS3] DIV 수평, 수직중앙정렬

container클래스는 DIV 중 Outer요소

block클래스는 DIV 중 Inner요소입니다.

1) 수평정렬

DIV내 DIV수평정렬 CSS_1

#container { width:200px; height:200px; background-color:#000000; } #block { width:50px; height:50px; background-color:#ffffff; margin:0 auto; }

DIV내 DIV수평정렬 CSS_2

#container { width:200px; height:200px; background-color:#000000;  text-align:center; } #block { width:50px; height:50px; background-color:#ffffff; display:inline-block; }

2) 수평 + 수직정렬

DIV내 DIV수평, 수직정렬 CSS

#container { width:300px;  height:300px;  background-color:#000000;     text-align:center;  vertical-align:middle;  display:table-cell; } #block { width:50px;  height:50px;  background-color:#ffffff;  display:inline-block; }