[CSS] 요소를 가운데 정렬 하는 좋은 방법 있을까요?

Question

{movies.map((movie) => ( ))}

* { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; overflow-y: hidden; } .contents { height: 100vh; display: flex; align-items: center; } .movie-container { display: flex; justify-content: center; align-items: center; }안녕하세요? 요소 가운데 정렬하는 방법이 궁금합니다..두번째 사진의 포커싱 되어있는 요소를 Y축에서 가운데 정렬하고 싶습니다.즉, css코드상에서 movie-container 를 정렬하고 싶습니다.코드를 보시면 아시겠지만 사실 flex 를 사용해서 정렬을 한 상태이나..첫번째 사진을 자세히 보시면 movie-container 기준 위쪽 파란색 영위 공간이 많고 아래 공간이 적잖아요?이게 제 추측이지만 overflow-y 속성으로 현재는 스크롤을 없앴지만, 스크롤한 영역까지 계산해서 그 가운데를 정렬한게 아닌가 싶습니다.하지만 제가 원하는 것은 스크롤은 없되 (사실 화면을 요소로 꽉채우지도 않았는데 스크롤이 왜 생긴지도 모르겠습니다.) 정확히 가운데 정렬하는 것을 알고 싶습니다.postion: absolute 를 설정하고 transformY(-50%) 였나? 이걸하니 제가 의도한 대로 정렬이 되긴하지만제가 초보라 그런지 absolute있으면 그 다른 요소들 배치를 잘 못하겠더라구요.. 혹시 다른 방법으로 가운데 정렬하는 방법이 있을까요?

몰랑토끼 · Answer

가운데 정렬 1.display - flex, table + table-cell 2.display - inline-block + text-allign 혹은 + vertical-align3.position - absolute

킁킁탐정 · Answer

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#center_an_item_in_the_area

둥글레차 · Answer

"첫번째 사진을 자세히 보시면 movie-container 기준 위쪽 파란색 영위 공간이 많고 아래 공간이 적잖아요?"-> 이유는 .contents 의 높이를 100vh 로 설정해주셨는데, 그보다 위에 로그인, 회원가입이 있는 헤더 영역 때문에 아래로 밀려서 그렇게 보이는것 같네요. 일단 제일 쉬운 방법은 height : calc (100vh - 150px) 이런식으로 헤더 높이를 빼주는 방식입니다. 150px은 임의로 준 헤더 높이에요. 설정해준 헤더 높이만큼 빼주세요. 참고로 postion: absolute 는 원하는 위치에 임의로 요소를 배치하고 싶을때 쓰는 css 입니다.

[CSS] 요소를 가운데 정렬 하는 좋은 방법 있을까요?

3개의 답변

Q&A 목록