[css] margin 중앙 정렬하기

1. margin이란?

정의된 테두리의 외부 여백을 설정에 사용.

 

2. 설정 방법

px, pt, cm,  % , auto, inherit 등으로 설정 가능.

상하좌우 모두 설정이 가능하고, 값의 수에 따라 지정 방향이 결정 된다.

margin: 10px (상하좌우)

margin: 10px, 20px (상하, 좌우)

margin: 5px 10px 5px 12px (상, 우 ,하, 좌) // 위쪽으로 부터 시계방향!!

또는,

margin-top, margin-right, margin-bottom, margin-left 를 사용하여 개별적으로 지정해줄 수 있다.

 

3. auto & 0 

margin의 값을 0으로 한다면 외부의 여백을 0으로 지정하는것. 

auto는 브라우져가 값을 자동으로 계산하여 지정하는 것으로 중앙으로 배치 시킬 수 있음

ex) margin: 0 auto; (y축 기준 중앙 정렬) / margin: auto 0; (x축 기준 중앙 정렬)

 

4. exception

중앙 정렬을 했을 때 작동하지 않는다면 두 가지를 확인해 보면 된다.

  1. position 지정해제

    - position이 지정되어 있다면 지정 해제 해주면 된다.

  2. display: block 지정

    - margin은 block 상태에서만 작동 하기때문에 속성이 block로 되어 있는지 확인 한다.