포지션을 활용한 가운데 정렬

포지션을 활용한 가운데 정렬

position을 활용한 가운데 정렬 하는 법

1. 일반적인 가운데 정렬법
   1. 선택자(ID name, Class name)의 css 속성을 flex-box를 활용하여 justify-content, align-items를 사용하여 가운데 정렬하는 방법
   2. display 를 사용하여 table-cell를 적용후 vertical-aling 속성을 적용하는 방법
2. position: absolute 속성을 활용한 정렬법
   1. 선택자의 position 항목을 absolute를 선언한후 left:50%, Top: 50%으로 선언하게되면, 좌측 상단 모서리를 기준으로 배열됨
   2. 추가 속성으로 transform 속성을 부여하여 (-50%, 50%) 기준점을 선택자의 가운데로 정의한다.

.name,#name{
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background: red;/*영역을 확인하기위한 색상코드 */
}