Feb 10, 2022

How To Center A Div

INTRODUCTION

Most developers, especially beginners just starting, have trouble centering a div. We'll take a look at different ways to center a div. You can utilize whichever method you're most comfortable with. Let's get started!

CENTER A DIV HORIZONTALLY

This method uses margin: auto; to horizontally center a div, the width will then be set to prevent the element from stretching out to the edges of its container.

CENTER A DIV HORIZONTALLY USING POSITION

This method of centering a div is to make use of positioning method; Apply position: relative to the parent element and position: absolute to the child element to be centered.

CENTER A DIV VERTICALLY AND HORIZONTALLY

You'll have to give values to the CSS position, left, top, and transform properties to center a div horizontally and vertically on a page. We begin by setting the div's position to absolute, the left and top properties to be set to 50%. This instructs the browser to align the div's left and top edges horizontally and vertically with the page. Now, we have to define the transform property to actually center the div horizontally and vertically. You want to move the div 50% to the left and top from where it already is. This instructs the browser to place the div in the center of the page.

CENTER A DIV USING FLEXBOX

Flexbox is a nice alternative compared to others because it is responsive and doesn't require resizing calculations, but it comes with a few steps to hold on to. First of all, You have to specify the parent container as a flex container. Secondly. set the display property to "flex", then set the properties align-items and justify-content to "center".

CENTER A DIV USING FLEXBOX IN TAILWINDCSS

First and foremost, you must incorporate Tailwind into your project, this link will guide you through https://tailwindcss.com/docs/installation. This method is similar to what we did in the previous method, the difference is that we are using tailwind terms.

Let's take a look at what we just did;

Flex: adds the CSS flex property "display: flex".

justify-center: used to center the items in the div horizontally.

items-center: used to vertically center the content.

h-screen: sets the div's height to 100vh

CENTER A DIV USING GRID IN TAILWINDCSS

First and foremost, you must incorporate Tailwind into your project, this link will guide you through https://tailwindcss.com/docs/installation. Grid is a another method for centering a div. This method is similar to flex, but with a few difference.

Let's take a look at what we just did;

Grid : adds the CSS flex property (display: grid).

place-items-center: places grid items on the center of their grid areas.

I hope this post was able to explain how to center a div. See you in the the next tutorial.