높이값이 지정되지 않은 요소에 가로세로 정렬방법 2가지 (선택적 사용)

높이값이 지정되지 않은 경우에도 사용가능

/* 
> 트랜스폼 이용
 - 창의 크기보다 컨텐츠의 높이가 큰 경우 컨텐츠 잘림 문제 발생 
*/

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* 
> top,bottom, left, right 모든 값을 0설정 
 - 위의 방법에 비해서 크로스브라우징 시 안전성이 조금 좋다
   창의 크기보다 컨텐츠의 높이가 높아도 컨텐츠 잘림 문제가 없다
*/

.box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}