How to centre an Element using Tailwind CSS ?
Last Updated :
09 Feb, 2024
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.
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
flex to make the element a flex container. - Use
justify-center to horizontally centre the element. - Use
items-center to vertically centre the element.
Example: Implementation to center an element horizontally.
HTML
<!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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
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-screen to set the height of the element to the screen size. - Apply
flex to make the element a flex container. - Use
items-center to vertically center the element.
Example: Implementation to center an element vertically.
HTML
<!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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
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-screen to set the height of the element to the screen size. - Apply
flex to make the element a flex container. - Use
items-center to vertically center the element. - Use
justify-center to horizontally center the element.
Example: Implementation to center an element vertically and horizontally both.
HTML
<!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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body>
<div class="h-screen flex items-center justify-center">
Horizontally and Vertically Centered Element
</div>
</body>
</html>
Output:
Similar Reads
How to Align Form Elements to Center using Tailwind CSS? Form elements are parts of a webpage that let users enter information. They include things like text boxes, checkboxes, radio buttons, dropdown menus, and buttons. To center form elements using Tailwind CSS, use classes like flex, items-center, and justify-center on a parent container.These are the
2 min read
How to Center an Image using Tailwind CSS ? Here are the methods to center an image using Tailwind CSS:Method 1. Using Flexbox ClassesThis method centers the image both horizontally and vertically using Tailwind's flex, justify-center, and items-center classes.HTML<html> <head> <script src="https://cdn.tailwindcss.com"></
2 min read
How to Fixed an Element to Center in Tailwind CSS? Here are two different methods to center an elementwith Tailwind CSS.1. Using mx-auto ClassWe can use the 'mx-auto' utility class to center an element horizontally. The "mx-auto" class centers an element horizontally within its parent container by setting the left and right margins of the element to
2 min read
How to align block elements to center using CSS ? Block elements are known for taking up the full line space, forcing other elements to start on a new line. This means they have a width of 100% of the webpage or container holding the block. In this article, we will explore how block elements usually behave and how to center them using CSS. Table of
3 min read
How to create a Chevron using Tailwind CSS ? A Chevron is a basic geometric shape that is used in websites to indicate directional movements or navigation. By utilizing specific border properties and transformations, a chevron shape can be achieved without the need for custom CSS. Tailwind's utility-first approach allows for a straightforward
3 min read