Hello Guys!
Today we will learn to center a button in HTML and CSS.
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.