CSS에서 Margin Auto로 Div를 중앙 정렬하는 방법

div처럼 블록 레벨 요소(화면 전체를 차지하는 요소 —옮긴이)를 가지고 있는 태그를 중앙 정렬하기 위해선 margin 속성을 사용하여 값을 0 auto로 주면 됩니다.

 

<div class="container">
  <div class="child"></div>
</div>


.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수평 중앙 정렬하기 */
  margin: 0 auto;
}