div tailwindCSS와 Bootstrap을 중앙에 배치하는 방법

순수한

<div class="relative">
 <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"></div>
</div>

<div class="position-relative">
 <div class="position-absolute top-50 start-50 translate-middle"></div>
</div>

몸을 풀다

<div class="flex justify-center items-center">
 <div class=""></div>
</div>

<div class="d-flex justify-content-center align-items-center">
 <div class=""></div>
</div>

여백이 있는 플렉스

<div class="flex">
 <div class="m-auto"></div>
</div>

<div class="d-flex">
 <div class="m-auto"></div>
</div>

그리드

<div class="grid place-items-center">
 <div class=""></div>
</div>

<div class="d-grid justify-content-center align-items-center">
 <div class=""></div>
</div>

여백이 있는 그리드

<div class="grid">
 <div class="m-auto"></div>
</div>

<div class="d-grid">
 <div class="m-auto"></div>
</div>