Tailwind CSS follows a utility-first approach, which means that instead of writing custom CSS for each component, we can utilize pre-defined classes that apply specific styles directly to HTML elements. We can center an element by using the utility classes of “margin” and “flex”. This article will guide you through the various techniques to center an element using Tailwind CSS.
Table of Content
Horizontally centering an element with Tailwind
Horizontally Centering Element with Flexbox: Tailwind’s flexbox utilities make it simple to center elements horizontally, ensuring that content remains neatly aligned at the center of the page, enhancing readability and visual appeal.
Syntax:
<div class="flex justify-center items-center">
Horizontally Centered Element
</div>
Approach
-
Apply
flexto make the element a flex container. -
Use
justify-centerto horizontally centre the element. -
Use
items-centerto vertically centre the element.
Example: Implementation to center an element horizontally.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontally Centered Element with Tailwind</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="flex justify-center items-center">
Horizontally Centered Element
</div>
</body>
</html>
|
Output:
Vertically centering an element with Tailwind
Vertically Centering Element with Flexbox: By leveraging Tailwind’s flexbox capabilities, this method focuses on centering elements along the vertical axis, providing a streamlined solution for achieving balanced and aesthetically pleasing designs.
Syntax
<div class="h-screen flex items-center">
Vertically Centered Element
</div>
Approach
-
Use
h-screento set the height of the element to the screen size. -
Apply
flexto make the element a flex container. -
Use
items-centerto vertically center the element.
Example: Implementation to center an element vertically.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertically Centered Element with Tailwind</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="h-screen flex items-center">
Vertically Centered Element
</div>
</body>
</html>
|
Output:
Horizontally and Vertically center an element with Tailwind
Horizontally and Vertically Centering Element with Flexbox: This approach utilizes Tailwind’s flexbox utilities to easily center elements both horizontally and vertically on the screen, ensuring a visually appealing layout with minimal effort.
Syntax
<div class="h-screen flex items-center justify-center">
Horizontally and Vertically Centered Element
</div>
Approach
-
Use
h-screento set the height of the element to the screen size. -
Apply
flexto make the element a flex container. -
Use
items-centerto vertically center the element. -
Use
justify-centerto horizontally center the element.
Example: Implementation to center an element vertically and horizontally both.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontally and Vertically Centered Element with Tailwind</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="h-screen flex items-center justify-center">
Horizontally and Vertically Centered Element
</div>
</body>
</html>
|
Output: