[CSS, Tailwind CSS] DIV 여러개 세로 정렬하기

CSS 는 대부분 재미있지만, 정렬하는 부분에서 꽤 애를 먹게 되는 것 같다.

예전 프로젝트 때도 정렬 때문에 CSS 하면서 힘들었던 기억이 있어서, 이번 붕어빵을 부탁해 프로젝트를 하며 기록해두려고 한다.

 

 

붕어빵을 부탁해 메인페이지를 만드는 중인데, div 들이 좌측 정렬 된 채로 가운데 정렬이 잘 안되어서 우선 배치만 해두었다.

 

요소들이 세로로 배치되어 있고, 이걸 세로로 가운데 정렬 해야하는 상황이다.

 

서치해보면서 몇몇 시도를 했는데 원하는 결과가 나오지 않았다🥲

• margin : auto 를 줘라 - tailwind에서는 해당 속성이 없어서 불가
• text-align : center 를 줘라 - 적용해도 정렬되지 않음

서치하며 이것저것 하다가, flexbox 로 하는 방법을 알게 되었고, 드디어 성공! 방법은 다음과 같다.

 

/* 부모 div 태그에 아래 네개의 속성을 적용시켜준다.*/
display : flex;
flex-direc : column;
justify-items: center;
align-items: center;

/* tailwind - 부모 div 태그에 아래 classname을 적용시켜준다. */
<div className="flex flex-col justify-center items-center">
	<div></div>
	<div></div>
</div>