• CSS Layout - Horizontal & Vertical Align

div와 같은 블럭 요소를 가로 방향으로 중앙 정렬 하기 위해, margin: auto; 를 사용합니다.
해당 요소의 너비를 설정하면 요소를 포함하고 있는 컨테이너의 가장자리까지 해당 요소가 펼쳐지지 않습니다.
그 후, 해당 요소는 지정된 너비만 차지하고, 남은 공간은 두 개의 마진 사이에서 균일하게 배분됩니다.

.center {
   margin: auto;
   width: 60%;
   border: 3px solid #73ad21;
   padding: 10px;
}

Note: width 속성을 설정하지 않거나 100%로 설정하면 중앙 정렬은 아무런 효과가 없습니다.

요소 내부에 텍스트를 중앙 정렬하기 위해 text-align: center; 속성을 사용합니다.

.center {
   text-align: center;
   border: 3px solid green;
}

Note: 텍스트 정렬 방법에 대한 더 많은 예제는 CSS Text를 참조합니다.

이미지를 중앙 정렬하기 위해서 좌측 우측 마진을 auto 로 설정하고 block 요소로 만들어야 합니다.

img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

요소들을 정렬하는 한 가지 방법은 position: absolute; 속성을 사용하는 것입니다.

<code css>

</cdoe>