[position, margin] 배치와 가운데 정렬을 함께 해야하는 경우

부모요소를 기준으로 자식요소를 배치할 때는 

부모요소에 position값을 relative를 준다. (자신 기준)

(부모요소에 position값 있는지 반드시 확인)

 

자식요소에 position값을 absolute로 준다. (부모요소에 position값이 있으므로 부모 기준으로 배치됨)

 

브라우저의 크기가 변경될 때 자식요소가 부모요소 내부에 위치하면서 

브라우저가 자동으로 계산하도록 하려면?

 

자동으로 계산할 너비나 높이등의 사이즈를 명시한다.

(예시

width : 1100px; )

좌우의 기준점을 잡아준다.

(예시 

left: 0 right: 0)

 

그것의 margin을 자동으로 계산하도록 auto 값을 준다

(예시

margin: 0 auto)

 

브라우저의 크기가 변해도 

브라우저가 자동으로 계산해

수평의 가운데 배치하게 된다...