특정 요소 top, translateY로 부모 요소 중앙 정렬하기

1. top: 50%;
- 요소를 부모 요소를 기준으로 50% 아래로 이동시킵니다. 즉, 요소의 상단이 부모 요소의 중간에 위치하게 됩니다. (이때 요소의 높이를 고려하지 않아 중앙 정렬이 되지 않습니다)

 

2. transform: translateY(-50%);
- 요소를 현재 위치에서 자신의 높이의 50%만큼 위로 이동합니다. 

 

=> 요소의 상단이 부모 요소의 중간에 위치하고, 그 위치에서 요소가 자신의 높이의 절반만큼 위로 이동하게 되어 요소의 중간이 부모 요소의 중간에 위치하게 됩니다

 

예를 들어, 요소의 높이가 50px이고 부모 요소의 높이가 100px이면

1. top: 50%;를 적용하면, 요소의 상단이 부모 요소의 상단에서 50px (100px의 50%) 아래로 이동하고,

2. transform: translateY(-50%);를 적용하면 요소가 자신의 높이인 50px의 50% (즉, 25px)만큼 위로 이동하게 됩니다

.form__input-wrapper {
    position: relative;
}

.form__input-wrapper::after {
    position: absolute; 
    top: 50%; /* 부모 높이의 50%에 위치 >> 자식 요소 자체 높이 고려x */
    transform: translateY(-50%); /* 자신 높이의 절반만큼 위로 이동*/
}