Tailwind center div vertically and horizontally - Full screen

Tailwind CSS is a utility-first CSS framework that offers a library of pre-defined CSS classes for quickly applying common styling patterns to elements.

Utilizing TailwindCSS, you can center a div both vertically and horizontally by combining the items-center and justify-center classes with the flex utility classes.

HTML:

<div class="flex items-center justify-center h-screen w-screen">
  <div>
    Your content goes here
  </div>
</div>

Output:

Check Live Demo

Explanation:

• flex: This class transforms an element into a flex container, allowing its child elements to be positioned either horizontally or vertically. The CSS property used is display: flex
• justify-center: This class centres the flex container's child elements horizontally within the parent container. The CSS property used is justify-content: center
• items-center: This class centres the flex container's child elements vertically within the parent container. The CSS property used is align-items: center
• h-screen: This class makes an element's height to be the exact height of the screen. The CSS property used is height: 100vh
• w-screen: This class makes an element's width to be the entire width of the screen. The CSS property used is width: 100vw

As a result, the code will generate a div element that is centred both horizontally and vertically on the screen and takes up the entire screen space. The child div within it will also be centred within the parent div, as will the content within it.

Here's an example of how you can achieve the same layout as the Tailwind classes using only CSS:

CSS:

.flex-container {
  display: flex; /* sets the element to be a flex container */
  justify-content: center; /* aligns child elements horizontally */
  align-items: center; /* aligns child elements vertically */
  height: 100vh; /* sets the element's height to be the full height of the screen */
  width: 100vw; /* sets the element's width to be the full width of the screen */
}

HTML:

<div class="flex-container">
  <div>Your content goes here</div>
</div>

To centre align the div vertically and horizontally, you can also use the absolute inset-0 m-auto h-max w-max

HTML:

<div class="absolute inset-0 m-auto h-max w-max">
  <div>
    Content goes here
  </div>
</div>

Explanation:

• absolute: This class removes the element from the typical document flow while positioning it in relation to its closest positioned ancestor. It means that while the element will be positioned in a specific location on the page, the placement of the components around it won't be affected.
• inset-0: This class adds zero margin and padding to the div element's four sides. This removes the element's default padding and margin from the top, bottom, left, and right, bringing it flush with the edge of its parent container. The inset CSS property is a shortcut for the properties top, right, bottom, left.
• m-auto: This class centres the element horizontally by setting the element's left and right margins to auto. This will centre the div element horizontally within its parent container. When the left and right margins are set to auto, the browser will calculate the remaining space and distribute it evenly between the two margins. The element will be effectively centred within its parent container as a result.
• h-max: This class makes the element's height equal to 100% of the height of its parent container.
• w-max: This class makes the element's width equal to 100% of the width of its parent container.

As a result, the code will generate a div element that is centred horizontally and vertically and fills the entire space of its parent container.

Here's an example of how you could use pure CSS to get the same styling as the preceding code snippet:

HTML:

<div class="container">
    Content goes here
</div>

CSS:

.container {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}

Using Tailwind CSS's grid system, centre a div both vertically and horizontally.

HTML:

<div class="grid place-content-center h-screen">
  Your content goes here1
</div>

Explanation:

• grid: This class makes the element a grid container and enables grid layout. As a result, it is simple to align and position the child items inside the div.
• place-content-center: This class centres the content within the parent container both vertically and horizontally. It combines the align-content, align-items, and justify-content features into a single shorthand utility class.
• h-screen: This class makes the element's height equal to the height of the viewport/screen.

Thus, the code will generate a div element that is both horizontally and vertically centred on the screen, and the content contained within the div will also be centred. In terms of horizontal space, the div will occupy the entire screen.

This method, which is simple and easy to understand, uses Tailwind CSS's grid alignment utilities to centre the element within its parent container. It's worth noting that in this example, the parent container must have a defined height in order for the inner div to be correctly positioned.

Here's an example of using vanilla CSS to achieve the same styling as the previous code snippet:

CSS:

.center-container {
    display: grid;
    place-content: center;
    height: 100vh;
}

HTML:

<div class="center-container">
  Your content goes here1
</div>

Conclusion

In conclusion, Tailwind CSS is a strong tool that can be used to rapidly and simply design complicated and responsive layouts. It offers a selection of pre-defined CSS classes that can be used to apply typical stylistic conventions to elements, such as the ability to center div on the middle of screen. It can be simple to create responsive designs using its utility classes and to maintain uniformity across the entire website or application.

It is a fantastic option for developers that want to concentrate on creating the project's functionality rather than spending a lot of time on style.