[트러블슈팅] 6. Absolute 중간 배치

Solution

• transform:translate(-50%, -50%); top:50%; left:50%
• display 속성으로 변경할 수 없을 때 사용 가능

• 부모 개체 display를 flex로 변경 후 justify-content:center;

img-title {
            position: absolute;
            width: 100px;
            top: 50%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            font-weight: 500;
            color: rgb(255, 255, 255);
        }

.content {
						display: flex;
						justify-content: center;
            background-color: rgb(225, 225, 225);
            border-radius: 10px;
        }