[css] position:absolute 가운데 정렬

페이지 정보

작성자 webpaper 댓글 0건 조회 3,463회 작성일 20-12-28 16:33

본문

/* 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%);
}