지금까지 CSS로 화면중심에 어떤 콘텐츠를 현시하려면
요소의 높이가 불확정 상태의 경우 부모 요소를 기준으로 절대 위치를 지정하는것밖에 모릅니다.
Copy
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
/*요소의 높이의 반(50%) 만큼 위로 이동*/
transform: translateY(-50%);
}그런데 position 을 쓰는 경우 불합리한 문제가 발생해서요 이외에 다르게 작성하는 방법이 없을까요?
|
답변 1개 / 댓글 1개
채택된 답변
+20 포인트
swallow
2023-07-10 (월) 16:57:01
Position으로 중앙정렬하는방법은 좋은점도 있고 기능사항에 따라 불합리할수도 있습니다.
저의 경험에 의하면 position 으로 중앙정렬하는 경우 어떤때엔 흐려진듯한 감을 줄때도 있었는데 그 문제해결방도가 신통한게 없었습니다.
Flexbox를 사용해보세요.
Copy
.parent {
display: flex;
justify-content: center; // 가로 중심
align-items: center; // 세로 중심
}답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.