[HTML + CSS] block 요소의 가운데 정렬

BLOCK 요소의 가운데 정열

1. Block 요소 width 가운데 정열

.block-element {

width: 500px;                                      // block 요소의 넓이값 지정

margin: 0 auto;                                      // top, bottom margin 은 0, left, right margin은 auto  

}

2. Block 요소 width 및 height 가운데 정열: 항상 화면의 중앙에 위치

.block-element {

width: 500px; 

height: 300px; 

position: absolute; 

top: 50%;

left: 50%; 

margin-top: -150px;   // 150px = block 요소의 height / 2 

margin-left: -250px;   // 250px = block 요소의 width / 2

}