css position 중앙정렬

position이 적용 되었을 때

• absolute가 적용되면 margin: 0 auto; 적용 불가. (relative는 가능)

1. position: 50%;, 요소가 가지는 값의 반을 음수(-)로 적용

• 가로 세로 값을 알아야 함.

top: 50%; left: 50%; /* positon 중앙 위치 */
margin-left: -100px; margin-top: -50px; 
/* 요소의 크기가 200x100 이라고 가정.
height=100px의 반 width=200px의 반  */

2. position: 0;, margin: auto;

• 가로 세로 값을 알아야 함.

top: 0; right: 0; bottom: 0; left: 0; margin: auto;

3. position: 50%;, transform: translate 이용

• 가로 세로 값을 몰라도 가능.
• 가장 많이 쓰는 방법.

top: 50%; left: 50%;
transform: translate(-50%, -50%);