CSS_가운데 정렬

▶Margin: auto 

▷Margin auto란?

auto는 개체가 상위 컨테이너의 중앙에 위치하는 것으로 자연스럽게 좌우여백은 균등하게 배분된다.

▷주의사항

1) 폭의 연산이 불가능하면 가운데 정렬을 할 수 없다.

    Width값을 정확히 입력시켜주거나 overflow:hidden 을 해준다.

2) block 속성만 margin으로 처리가 가능하다. inline 속성을 가운데 정렬시키고싶다면

    display: block;을 시켜준다.

3) position: absolute와 relative를 통해 가운데 정렬의 기준점을 명확하게 해준다.

4) left: 0, right: 0값도 입력시켜주는 것이 좋다.

 

▶text-align : center

부모요소가 block이고 자식요소가 inline일 때 부모요소에 text-align을 넣어준다.

 

*Reference

https://hansolcha.tistory.com/4

 

▶top: 50%, left: 50%

▷top: 50%, left: 50%란?

자식요소가 정 가운데 위치하게되며 요소의 맨 왼쪽, 맨 위쪽 좌표를 기준으로 가운데로 위치하게된다.

▷주의사항

1)부모요소에 position : relative, 자식요소에 position : absolute; 가 설정이 되어있을 때 사용할 수 있다.

2)자식요소에 top과 left값을 입력한다.

3) width값을 입력해준다.

4) top: 50, left: 50 만 사용하면 100% 완벽한 가운데 정렬이 되지 못하는데 

    transform : translate(-50%, -50%); 

    margin-left: -50px , margin-top: -50px;

    위 둘중 하나를 자식요소에 추가하여 완벽한 가운데 정렬을 이루게 한다.

 

 

*Reference

https://velog.io/@sklove96/css-absolute-%EC%9D%BC-%EB%95%8C-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC-%EB%B0%A9%EB%B2%95