css 세로 가로 가운데 정렬해서 넣기

 

여러 방법이 있지만 가장 편하고 많이 쓰는 방식이다.

해당요소에

width: 100%;
display: flex;
align-items: center;
justify-content: center;

이렇게 작성하면 가운데로 정렬된다.

width 또는 height를 설정해주어야 그 공간 내에서 가운데로 정렬됨을 기억하자.

---

tailwind에서는

<div className="w-full flex items-center justify-center"></div>

로 사용하면 된다.

 

---

 

아니면 width값을 설정한 후, 좌우 공백을 auto로 설정하면 가운데로 정렬된다.

width: 760px
margin-left: auto
margin-right: auto