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

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;
}

TailwindCSS

Posted by ton