How to center a button in CSS?

CSS is mainly used for providing the best style to the HTML web page. Using CSS, We can specify the arrangement of elements on the page.

There are various methods of aligning the button at the center of the web page. We can align the buttons horizontally as well as vertically. We can center the button by using the following methods:

text-align: center - By setting the value of text-align property of parent div tag to the center.
margin: auto - By setting the value of margin property to auto.
display: flex - By setting the value of display property to flex and the value of justify-content property to center.
display: grid - By setting the value of display property to the grid.

Let's understand the above methods by using some illustrations.

Example

In this example, we are using the text-align property and set its value to the center. It can either be placed in a body tag or in the parent div tag of the element.

Here, we place the text-align: center; in the parent div tag of the button element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Center align button</title>
<style>
.container{
text-align: center;
border: 7px solid red;
width: 300px;
height: 200px;
padding-top: 100px;
}
#btn{
font-size: 25px;
}
</style>
</head>
<body>
<div class="container">
<button id ="btn"> Click me </button>
</div>
</body>
</html>

Test it Now

Output

Example

In this example, we are using the display: grid; property, and margin: auto; property. Here, we place the display: grid; in the parent div tag of the button element.

The button will place at the center of the horizontal and vertical positions.

<!DOCTYPE html>
<html>
<head>
<title>Center align button</title>
<style>
.container {
width: 300px;
height: 300px;
border: 5px solid red;
display: grid;
}
button {
background-color: lightblue;
color: black;
font-size: 25px;
margin: auto;
}
p{
font-size: 25px;
}
</style>
</head>
<body>
<div class="container">
<button> Click me </button>
</div>
<p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p>
</body>
</html>

Test it Now

Output

Example

It is another example of placing the button at the center. In this example, we are using the display: flex; property, justify-content: center; property, and align-items: center; property.

This example will help us to place the button at the center of the horizontal and vertical positions.

<!DOCTYPE html>
<html>
<head>
<title>Center align button</title>
<style>
.container {
width: 300px;
height: 300px;
border: 5px solid red;
display: flex;
justify-content: center;
align-items: center;
}
button {
background-color: lightblue;
color: black;
font-size: 25px;
}
</style>
</head>
<body>
<div class="container">
<button> Click me </button>
</div>

</body>
</html>

Test it Now

Output