[css] 태그 가운데 정렬 하는 법

부모 태그의 자식 태그를 대상으로 가운데 정렬함을 가정

 

form 은 부모 태그, div 는 자식 태그

세로 여백을 0으로 설정하고, 가로 여백을 `auto`로 설정하면, 브라우저가 알아서 여백을 조절하여 
중앙정렬을 해준다. 이 때 부모 태그의 가로 넓이를 작게 설정하고, 자식의 가로넓이를 그 부모태그의
100%으로 설정하면, 중앙정렬이 되는 동시에 브라우저 크기에 따라 태그의 크기를 조절할 수 있다.

---

 margin 속성 유형

/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;

/* 세로방향 | 가로방향 */
margin: 5% auto;  

/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

margin 에서 auto 속성은 브라우저가 적절한 여백을 찾아서 조절해준다. 즉, 중앙정렬을 알아서 해줌.

 

참고자료)

https://developer.mozilla.org/ko/docs/Web/CSS/margin

margin - CSS: Cascading Style Sheets | MDN