Center align CSS button inside a div tag

When you step into the world of web development and try your hands on HTML and CSS, you are likely to have come across the problem of “center align CSS button inside a div tag“. In this article, we are going to dissolve this problem into 3 simple ways, which can center any button in any div ?

Let’s get started!

Setup

So for our tutorial, let’s take the most general example. where we need to center a button inside a div. So the setup code can be something like this:

HTML:

<div>
     <button>Click Me</button>
</div>
Code language: HTML, XML (xml)

We make a button element inside the div.

CSS:

div{
    border: 1px solid blue;
    height: 5rem;
}
button{
    
}
Code language: CSS (css)

We target the div and the button as our CSS selectors.

This is how it appears initially:

Now, there are 3 ways we can center align CSS button inside the div:

• CSS Grids
• CSS Transform
• CSS Flexbox

Using CSS Grid

When we use CSS Grid, it can center any element horizontally and vertically. This is the easiest way to center the button inside the div.

We just have to give the div, these 2 properties:

• display: grid
• place-items: center

Let’s take a look at how we can do the same:

CSS:

div{
    border: 1px solid blue;
    height: 5rem;

    display: grid;
    place-items: center;
}
button{
    
}
Code language: CSS (css)

Yep that’s it, that will center the button inside the div like:

Using CSS Transform

So in this method, we are going to position the button absolute to the div. Then we apply the CSS Transform properties on the button so that it becomes centered, horizontally, and vertically.

We apply a position: relative to the div, like this:

div{
    border: 1px solid blue;
    height: 5rem;
    position: relative;
}
Code language: CSS (css)

Now, we add the following properties to the button style:

1. position: absolute
2. top: 50%
3. left: 50%
4. transform: translate(-50%, -50%)
5.  -ms-transform: translate(-50%, -50%)

First, we position the button to the absolute inside the div.

We set the button to be positioned at 50% height of the div from the top.

Then we set the button to be positioned at 50% width of the div, from left

Now apply the transform properties to move them 50% in the x and y axis respectively.

The “-ms-transform” property is additional support of the transform property for all browsers.

CSS:

div{
    border: 1px solid blue;
    height: 5rem;
    position: relative;
}
button{
    position: absolute;
    top: 50%;
    left: 50%;
     -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
Code language: CSS (css)

This is how we centered the button using CSS Transform:

Using CSS Flexbox

The advent of CSS Flexbox made it easier to center anything.

Flexbox works via putting what you want to center in a div and giving the div a display of flex. Then set justify-content to center.

CSS:

div{
    border: 1px solid blue;
    height: 5rem;
    display: flex;
    justify-content: center;
}
Code language: CSS (css)

But this actually will only center it horizontally.

To center it vertically, we need to add the property align-items as center.

CSS:

div{
    border: 1px solid blue;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
Code language: CSS (css)

So this is how it looks finally:

So now you can flex (pun intended ?) to your friends that you know how to center align CSS button in a div.

Conclusion

In this tutorial, we learn how we can center align CSS button inside a div.

If you wish to know how center any image inside a div using CSS, read here.

We used codedamn playgrounds in this tutorial and how can try it out yourself by forking this playground.

I hope you liked reading this article! ?

You can read more on the codedamn blog

P.S: I have won many hackathons and worked on many projects. You can connect with me on LinkedIn to know about hackathon ideas, internship experiences, and Development tips.