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

(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 className="h-screen">
          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 className="flex flex-col items-center justify-center h-1/4">
            className="text-2xl w-2/3 text-center lg:max-w-prose"
            dangerouslySetInnerHTML={{ __html: ideasData[ideaIndex] }}
        <div className="text-center">
            className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
            onClick={() => refreshIdea()}
            Get another idea
      <div className="max-w-prose"></div>

TODO: Refine that example some