목적:
화면을 축소해도 컴포넌트의 위치가 화면의 중앙에 있도록 하기!
첫 번째 방법 (실패)
부모 컴포넌트를 만들어서 align-items: center 적용하기
중앙에 있지 않고 화면 상단에 위치하고 있다.
두 번째 방법 (성공)
적용할 컴포넌트 자체에 화면 정중앙에 올 수 있는 스타일 적용하기
translate 뒤의 값은 기본으로 -50, -50으로 설정한 뒤, 계속 변경해가면서 컴포넌트가 중앙에 올 수 있도록 수정하였다.
축소해도 컴포넌트가 화면 중앙에 위치하는 것을 볼 수 있다!
'HTML, CSS' 카테고리의 다른 글
| [CSS] 미디어 쿼리(Media Query) 적용 안되는 오류 해결 (0) | 2023.07.25 |
|---|