• 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; 속성을 사용하는 것입니다.

.right {
   position: absolute; 
   right: 10px;
   width: 300px;
   border: 3px solid #73ad21;
   padding: 10px;
}
</cdoe>
절대 위치 요소(absolute positioned elements)는 일반적인 배치 흐름에서 제거되고 요소들과 겹칠 수 있습니다.\\
\\
\\
=====Left and Right Align - Using float=====
요소를 정렬하는 다른 방법은 ''float'' 속성을 사용하는 것입니다.\\
====예제====
<code css>

Note: 한 요소가 자신을 포함하고 있는 요소보다 더 크고, float 속성이 적용된 경우, 요소를 포함하는 컨테이너 외부로 넘칠 수 있습니다. 이것을 해결하기 위해 “clearfix hack를 사용할 수 있습니다.(하기 예제 참조)