【TailwindCSS】absoluteの要素を中央配置する方法

Flexboxを使用

親要素にflex、items-center、justify-centerを適用し、absolute要素をinset-0で配置します。

<div class="relative w-80 h-80">
  <div class="absolute inset-0 flex items-center justify-center">
    <button class="bg-blue-500 text-white px-6 py-3 rounded">
      中央配置
    </button>
  </div>
</div>

top-1/2とleft-1/2を使用

top-1/2 left-1/2で要素を50%の位置に配置し、-translate-x-1/2 -translate-y-1/2で要素自身のサイズ分だけ戻します。

<div class="relative w-80 h-80">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
    <button class="bg-green-500 text-white px-6 py-3 rounded">
      中央配置
    </button>
  </div>
</div>

Grid Layoutを使用

親要素にgrid place-items-centerを適用することで中央配置できます。

<div class="relative w-80 h-80 grid place-items-center">
  <div class="absolute">
    <button class="bg-purple-500 text-white px-6 py-3 rounded">
      中央配置
    </button>
  </div>
</div>