フリーターからプログラマになったオヤジの備忘録

フリーターからフリーランスになった就職経験なしの オヤジ が物忘れと戦うブログ

Tailwind CSSで織りなすh-screenに邪魔されずに画面中央にしたい世界線

Tailwindで画面中央に配置したい場合

h-screen w-screen flex justify-center items-center

を使うことが多いと思いますが、親要素ですでにh-screenを指定していると場合によって画面以上になってしまいます。

そんな場合は

absolute inset-0 flex items-center justify-center

で対応可能。

選ばれて10年。エンジニアの気持ちが分かる転職エージェントは【アイムファクトリー】

一緒にアニメ・ゲームを楽しめるパートナーを探すなら【ヲタ婚】

真剣な方が集う大人の婚活パーティー♪

ソース

※ Reactです

      <div className='min-h-screen bg-blue-300'>
        <div className="sticky top-0 bg-slate-800 text-white py-2">
          <h1 className="uppercase font-black text-center text-2xl tracking-wider">header</h1>
        </div>
        # ここで指定
        <section className="absolute inset-0 flex items-center justify-center">
          <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
            <h2 className="text-4xl font-extrabold tracking-tight leading-none text-gray-700 md:text-5xl">
              ここ 真ん中 にしたい
            </h2>
            <p className="text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48">
              header attemo mannaka ni shitai
            </p>
            <button
              type="button"
              className="bg-blue-500 mt-6 hover:bg-blue-400 hover:shadow-lg text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
            >
              <span className="text-white">button</span>
            </button>
          </div>
        </section>
      </div>

アニメ・ゲーム好きの異性と出会いたいなら【ヲタ婚】

1年以内の成婚率41.3%!
平均6.6ヶ月で婚約できるスマホの結婚相談所【naco-do】