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