【Tailwind CSS】文字を上下左右中央に配置する方法

2023年2月27日TailwindCSS

文字を上下左右の中央に配置する方法を紹介します。（スクロールしても上下左右中央に配置されたままにできます。）

<div class="sticky top-1/2 left-1/2 text-center">
    上下左右中央に配置されます。（スクロールしても付いてきます。）
</div>

＜参考＞
CSSに展開されると以下のようになる。

“position: sticky;"にするとスクロールについてくる

.text-center {
text-align: center;
}
.left-1\/2 {
left: 50%;
}
.top-1\/2 {
top: 50%;
}
.sticky {
    position: sticky;
}