/* absolute 가운데 정렬 : margin 사용*/
.box{
    width:500px;
    height:500px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-250px; /* width의 절반값 */
    margin-left:-250px; /* height의 절반값 */
}

/* absolute 가운데 정렬 : transform 사용*/
.box{
    width:500px;
    height:500px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}