The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Center Text Horizontally And Vertically With Tailwind CSS 3

TODO: Pull subtitle into page object

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

code_start_default_section code_end_default_section

TODO: Refine that example some

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Center Text Horizontally And Vertically With Tailwind CSS 3

-- p

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

-- code/
-- html

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

-- /code

-- p

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

-- p

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

-- code/
-- html

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

-- /code

-- p

TODO: Refine that example some


-- categories
-- Tailwind
-- CSS

-- metadata
-- date: 2022-01-05 22:58:56
-- id: 23j9twgs
-- status: draft
-- type: post
-- SCRUBBED_NEO: false
-- site: aws