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