[CSS] css absolute 가운데 정렬

개요

위의 이미지처럼 가운데에 도장이 박히는 UI 등 다양한 요구사항에 맞춰야할 때 유용하게 사용되는 position absolute 가운데 정렬에 관해서 작성해보려고 한다.

방법

기본적으로 부모가 relative여야 absolute가 제대로 작동한다.

.parent{
    width: 100%;
    position: relative;
}
.child{
    width: 100px;
    position: absolute;
}

1. translate

.child{
    width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2. margin

.child{
    width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* width의 50% */
    margin-top: -50px; /* height의 50% */
}