수직정렬1 [css] flex로 간단하게 수직&수평 가운데 정렬 로그인 페이지나 로딩 페이지 등을 제작할 때 페이지 전체의 수직, 수평으로 요소를 배치하는 경우가 많다. 보통 margin: 0 auto 로 수평 정렬을 쉬이 되나 수직정렬을 쉽지 않다. css flex를 사용하면 좀더 손쉽게 수평, 수직 정렬이 가능하다. 결과 HTML Download CSS body{ height: 100vh; background: #f5f5f5; } .flex_container{ height: 100%; display:flex; justify-content:center; align-items:center; } .flex_item{ margin-top:-20px; text-align:center; } .flex_item p{ font-size: 16px; color: #999; mar.. 2022. 12. 20. 이전 1 다음 728x90 반응형