3 Easiest Ways to Center an Element using HTML & CSS
Tags: webdev, beginners, css, tutorial
Published: 2023-01-04 14:44:42

Once upon a time, "**Centering a div**" was one of the dry jokes told by developers. Maybe it's not really dry because if I'm to be honest with you, to center an element on a page can be confusing especially if you are a beginner. But I will show you different methods you can work around this.

> **NOTE:**
> `margin: auto` and `margin: 0 auto` cannot center an element conveniently. They sometime work depending on your calculations and where you are applying them to.

I will use a `Login page` as my specimen in this experiment but note that you can use the same approach to enter either a div or any element with HTML and CSS. The first thing I’m going to do is to create `index.html` and `style.css` files (if you’re using reacts, just take note of the CSS part mostly).

TIP: Always reset a few of your default CSS that may disturb your arrangement. You can use the code below:
```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```


After creating the files, I will quickly create my form and style it. The code goes below 👇

HTML: 
```html
   <form>
        <input type="email" name="email" placeholder="Email address" />
        <input type="password" name="email" placeholder="*****" />
        <button class="submit-btn" type="submit">Log in</button>
    </form>
```

CSS: 
```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
form {
    display: flex;
    flex-direction: column;
    width: 400px;
       gap: 10px;
}
 
 
form input {
    outline: none;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 5px 7px;
}
 
form button {
    outline: none;
    background-color: black;
    color: white;
    border-radius: 10px;
    padding: 5px 7px;
    cursor: pointer;
}
```

If we run the code to check what we have, you will see something like this:

![Form sticking at the top-left corner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivc9kqvxnd4nf9znsqao.png)

Note that the form is sticking at the top-left corner of the page, that’s the default arrangement of HTML elements. Now the purpose of this tutorial is to bring the form at the absolute center.

Let’s start.

## Method 1: Using Flexbox or "Flex"

To use flexbox or simply “flex” to center an element, you have to take note of the following:

- The parent container of the page or the section you want to center the element on, must have a defined `height` and `width`.

- The Flex will be applied to the parent container.

Your parent container is where you want to center your element, in our case, our parent container is the `body` tag.

Since we want our form to be at the center of the whole page, it is, therefore, wise to give a width of 100vw and height of 100vh to the body (VW means view width; VW means view height).

After that, apply the following code to it:

```css
body {
    width: 100vw;
    height: 100vh;
     display: flex; /* a command to tell it to flex */
    justify-content: center; /* center the element at X-axis */
    align-items: center; /* center the element at Y-axis */
}
```

The reason why we are applying the CSS rules on the `body` or the parent container is because it is the only one that can control its children. So, we are just asking the parent to help us take care of the kids.

Now, this is what we have:

![Form is truly centered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ti8jvcftr0de6wds3s7h.png)

## Method 2: Using CSS Grid

In the case where you don’t wish to use `flexbox` in your project, you can always use `grid`. Grid is so powerful that you can use it to control your element any way you want it which you may not be able to do conveniently with flex.

Today’s discussion is not about `grid` vs `flex`, so **how can we use `Grid` to center an element**?

We will use the same code above but with a bit of change in the `body` CSS rule.

Note that the two rules mentioned above apply here too. So here is my updated `body`:

```css
 body {
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
}
```


If you check your browser, the `login` form is centered!


## Method 3: Using Position

The first two methods above use the parents' “body” to center our `login` form but this method will neither beg nor force the parent to control their kids. We are going to deal with the child directly.

So, using the code above, we will remove any CSS rule in the body rather than height and width. And in the `form` tag, we will use the position rule to center it.

My parent container simply have:
```css
 body {
  width: 100vw;
  height: 100vh;
  }
```

Here is where the magic happen; right in the form:

```css
form {
    display: flex;
    flex-direction: column;
    width: 400px;
    gap: 10px;
    

    + position: absolute; /* to put our form anywhere */
    +  top: 50%; /* to bring to center at Y-axis */
    + left: 50%; /* to bring to center at X-axis */
    + transform: translate(-50%, -50%); /* to make it stay at absolute center */
}
```

Since we are using `position: absolute` on the child, we need to make it relative to a particular parent. so just add `position: relative` to the parent (`body`) tag.

If you don't add the `position: relative` rule to the parent, the result will still be the same because we only have a single child in a parent container but in the case you have different tags and containers in your HTML, it won't work. So always use `position: relative` on the parent whenever a `position: absolute` is used on the child.

## Conclusion: Now you can center a DIV correctly!

We have other methods of centering an element, but I trust these 3 to work in whichever case you want to apply any of them. If you don't want to use `flex` or `grid`, you can try working with `Position` or `Margin`, you just have to calculate your values right.

If you know any other ways, we can perfectly center element, kindly tell us so that we can all learn together.

Thanks for reading (my first technical article 😎😎).