3 Easiest Ways to Center an Element using HTML & CSS

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:

* {
    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:

   <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:

* {
    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:

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:

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:

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:

 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:

 body {
  width: 100vw;
  height: 100vh;
  }

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

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 😎😎).