How to center div in tailwind?

I was looking at this question: How to center div horizontally and vertically using flexbox? this works good when using custom CSS, but how can I align div to center using Tailwind CSS class, veritically and horizontally. Since, I am already using Tailwind in a project, so I suppose I can use it instead of custom CSS.

Asked by:- neena
: 899 At:- 10/5/2022 4:08:42 PM
CSS tailwind center div

2 Answers
profileImage Answered by:- vikas_jk

You can use tailwind CSS class, '.flex', '.h-screen' for main div and '.m-auto' for inner div, as shown below:

<link rel="stylesheet" href='' />

<div class="flex h-screen">
  <div class="m-auto">

<div id="mainContainer" class="flex h-screen">
    <div  class="m-auto">
        <p>Some Text</p>

Here is the working fiddle link

'h-screen': Sets the 100vh (screen-height) as the height

'.flex': just adds "display:flex" to outer div

and '.m-auto': gives margin: auto to inner div

Using Flex-center Class

<div class="flex items-center justify-center h-screen">
  Centered div using Tailwind Flex

Hope this helps.

At:- 10/5/2022 4:16:08 PM
Thanks for excellent and quick answer, it helped. 0
By : neena - at :- 10/5/2022 4:18:58 PM

profileImage Answered by:- Vinnu

You can also do it with grid

<link rel="stylesheet" href='' />

<div class="grid justify-items-center items-center h-screen">
    <button>This is just a button</button>


Hope it helps.

At:- 10/14/2022 3:38:34 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use