개발자의 공부는 은퇴까지 필수다/css, scss
-
[css] 요소 높이가 가변인 경우 위아래 가운데정렬개발자의 공부는 은퇴까지 필수다/css, scss 2022. 2. 7. 09:11
.parent { position: relative; height: 100%; /* 적용 후에 먹지 않아서 뭐가 문제인가 봤더니 parent 요소 높이가 측정되지 않아 적용되지 않는 문제가 있었음 */ } //위아래 가운데에 요소를 넣을 때 .child { position: absolute; top:50%; transform: translateY(-50%); } //정가운데에 넣을 때 .child2 { position: absolute; top:50%; transform: translateY(-50%) translateX(-50%); left:50%; } translateY, translateX에 대해 간단히 설명하자면 부모 요소의 크기를 이용해 top, left로 가운데 지점의 위치를 구하고, 해당 지..