tailwind css 에서 요소들 모두 가운데 정렬하기

tailwind css에서 하위 요소를 가운데로 정렬하는 방법 

 

최근 배당투자 계산기 사이트 개발하는 중에 가운데 정렬을 자동으로 하는 방법이 궁금했다. 

아래는 내가 개발한 배당투자 사이트!

https://www.turtleinvest.site/ko

 

상위div에 classname을 아래와 같이 주고, 

flex-container items-center justify-center

 

하위 가운데 정렬할 요소들에 className = 'text-center" 를 주면된다

text-center

 

일일이 하는 방법이 번거로워서 아예 자동화할 수 있는 방식이 있나 찾는중

 

쓴 코드는 다음과 같다. 

 

<div className="my-3 flex-container items-center justify-center" >

 

<h1 className="text-3xl my-4">배당 투자 계산기 사용 방법</h1>

<p className="text-center">각 항목을 채워넣은 후, 계산 버튼을 클릭하십시오.</p>