중앙정렬

니가 누구던지 센터로 가버려 - CSS 중앙정렬 4가지 방법

CSS에서의 가운데정렬이란 초심자에게 가장 헷갈리는 컨셉 중 하나이다. 인라인요소/블럭라인 요소에 따라 다르고, 또 같은 속성이라 하더라도 상황에 따라 되는게 있고 안되는게 있다(?) 오늘은 딱, 깔끔하게, 거의 모든 상황에서 먹히는 4가지 중앙정렬 방법을 정리해보려 한다. 이 중에 상황에 따라+선호에 따라 맞춰 사용하면 되겠다. 전제조건 부모 div class="container" 안에 자식 div="box-1"을 만들었다. 정확한 결과를 위해, 적용된 마진 패딩값을 0으로 설정하고, box-sizing: border-box;를 준다. 뷰포트 안 어디라도 이동이 가능하기 위해 부모 cotainer div의 height를 100vh로 설정했다. * { margin: 0; padding: 0; box-si..