You are currently viewing How to center a button in HTML

Hello Guys!
Today we will learn to center a button in HTML and CSS.

Table of Contents

Step 1: Create a button

First of all, we will create a button. Let’s call it the Click Me button.

<div>
    <button>Click Me</button>
</div>

Here we have a simple HTML button, but it’s not centered yet. Let’s try to center it.

Step 2: Try to Center it with <center> tag

Lets’ put button inside the <center> tag.

<div>
    <center>
        <button>Click Me</button>
    </center>
</div>

But wait, it is only centered vertically, What about the horizontal?

For that, we have to understand the HTML webpage and the <center> tag.

How <center> tag work

Let me ask you a question- Suppose you have a paper in your hand and you have to find the center point of it, How you will do this?

Simple, We will first measure the height and the width of the page and then divide it by 2, That’s it.

This is how the <center> tag work. But there’s a problem with the HTML page. An HTML page has width, but it doesn’t have a fixed height. Its height can go infinite, and if we divide infinity by 2 we get infinite. That’s why the <center> tag only centers vertically.

Step 3: Center Horizontally

To center horizontally, we have to give a height space to our button and then we will center it using CSS.

Let’s do it

<div class="center">
  <center>
     <button>Click Me</button>
  </center>
</div>

Now let’s add some CSS

body: {
  position: relative;
}
.center {
  position: absolute;
  top: 50%;
  transform: translateY(50%);
  height: 500px;
}

And It’s done.

If you find this post helpful then please share it with your friends and don’t forget to tell your thoughts in the comment section.

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply