[CSS] 중앙 정렬하는 3가지 방식

1. Flex 

 

부모 요소에 display : flex를 주고 justify-content와 Align-items를 이용하면 99%는 중앙 정렬 시킬 수 있다.

but inline 요소와 Img 요소가 혼재해 있을 때는 오히려 번거로울 수 있다.

그럴때는 두 번째 방법을 쓰는 것을 추천한다.

 

2. margin : auto

margin auto는 블럭인 요소를 중앙 정렬 시킬 때 사용할 수 있다. 굳이 flex로 바꾸지 않아도 간단하게 중앙 정렬이 가능하다.

 

ex) img 태그를 중앙 정렬하고 block으로 만들고 margin auto를 쓰면 한 줄에서 가운데를 차지한다.

 

 

inline (span, heading, p)와 같은 문자 요소는 어떻게 중앙 정렬하는데?

 

3.text-align 

text-align을 이용하면 inline요소들을 아주 쉽게 중앙 정렬이 가능하다. 

이렇게 상황에따라 적재적소에 3가지를 사용하면 매우 유용하게 중앙 정렬이 가능하다.