transform: translateY(-50%)로 요소 수직 정렬

transform: translateY(-50%)는 요소를 수직으로 중앙에 정렬하는데 사용된다

1. top: 50%; - 이 속성은 요소의 상단을 부모 요소의 상단으로부터 50% 아래로 이동시킵니다. 즉, 요소의 상단이 부모 요소의 중간에 위치
2. transform: translateY(-50%); - 이 속성은 요소를 현재 위치에서 자신의 높이의 50%만큼 위로 이동

이 두 속성을 결합하면, 요소의 상단이 부모 요소의 중간에 위치하고, 그 위치에서 요소가 자신의 높이의 절반만큼 위로 이동하게 되어 요소의 중간이 부모 요소의 중간에 위치하게 된다

 

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

• top: 50%;를 적용하면, 요소의 상단이 부모 요소의 상단에서 50px (100px의 50%) 아래로 이동하고,
• 그 다음, transform: translateY(-50%);를 적용하면 요소가 자신의 높이인 50px의 50% (즉, 25px)만큼 위로 이동한다

import styled from 'styled-components';

const StCardWrapper = styled.div`
    display: flex;
    width: 100%;
    height: 50px;
    background-color: var(--blue-one);
    position: relative; /* 상대적 위치 설정 */
`;

const StAmount = styled.div`
    position: absolute; /* 절대적 위치 설정 */
    right: 10px; /* 오른쪽에서 10px 떨어진 위치 */
    top: 50%; /* 부모 요소의 중간 위치 */
    transform: translateY(-50%); /* 자신의 높이의 50%만큼 위로 이동 */
`;

export default function ExpenseCard({ costData }) {
    const { id, date, item, amount, description } = costData;
    return (
        <StCardWrapper>
            {date}
            <StAmount>{amount}</StAmount>
            {description}
        </StCardWrapper>
    );
}