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>