Center Text Horizontally And Vertically With Tailwind CSS 3

January 2022

With tailwind, this will put the content centered in the middle of the page both vertically and horizontally

<div class="flex items-center justify-center h-screen">
  this is in the middle
</div>

(Of course, you'll want to use className for something like Nextjs)

Here's an example with three blocks of content stacked over each other with the contents of each centered:

<div>
      <div className="h-screen">
        <div
          className={`text-gray-400 flex flex-col items-center justify-center h-1/6`}
        >
          <div>Need an idea for a programming project?</div>
          <div>Here ya go...</div>
        </div>
        <div className="flex flex-col items-center justify-center h-1/4">
          <div
            className="text-2xl w-2/3 text-center lg:max-w-prose"
            dangerouslySetInnerHTML={{ __html: ideasData[ideaIndex] }}
          ></div>
        </div>
        <div className="text-center">
          <button
            className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
            onClick={() => refreshIdea()}
          >
            Get another idea
          </button>
        </div>
      </div>
      <div className="max-w-prose"></div>
    </div>
  )
}

TODO: Refine that example some

end of line