How to Center a Button in CSS
- Center a Button Vertically and Horizontally
- Different Methods to Center a Button
-
Center a Button Using
text-align: center
-
Center a Button Using
display: grid
andmargin: auto
-
Center a Button Using
display: flex
-
Centering a Button Using
position: fixed
- Center Two or More Buttons
- Conclusion
The most delicate styling for an HTML web page is primarily achieved via CSS. The arrangements of components on the web page can be controlled with CSS.
There are different methods of aligning a button at the center of a web page. The alignments of the button can be fitted horizontally or vertically as preferred.
Center a Button Vertically and Horizontally
We are using positioning and the transform
property in this example to vertically and horizontally center the button
element:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 200px;
position: relative;
border: 2px solid blue;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<button>Button at the Center</button>
</div>
</div>
</body>
</html>
Here, we have set up the view of the button within a container to show the center alignment clearly.
Different Methods to Center a Button
A button can be centered by using the following methods:
text-align: center
- Enter the value of thetext-align
property of the parentdiv
tag ascenter
.margin: auto
- Enter the value of themargin
property toauto
.display: flex
- Enter the value of thedisplay
property toflex
and set the value of thejustify-content
property tocenter
.display: grid
- Enter the value of thedisplay
property asgrid
.
There are more other methods that can be used to center a button.
Center a Button Using text-align: center
We use the text-align
property and set its value to center
in the following example. This can be placed within the body
tag or the element’s parent div
tag.
Placing the text-align: center
in the parent div
tag of the button
element:
<!DOCTYPE html>
<html>
<head>
<style>
.container{
text-align: center;
border: 2px solid blue;
width: 300px;
height: 200px;
padding-top: 100px;
}
#bttn{
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<button id ="bttn"> Button at the Center </button>
</div>
</body>
</html>
Placing the text-align: center
within the body
tag:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<button>Button at the Center</button>
</body>
</html>
If necessary, move the button to the exact center of the page, the padding-top
property should be used, but this is not the best method to center a button.
Center a Button Using display: grid
and margin: auto
Here, we use the display: grid
property and the margin: auto
property in CSS. The display: grid
is placed in the parent div
tag of the button
element in the following example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
border: 2px solid blue;
display: grid;
}
button {
background-color: lightpink;
color: black;
font-size: 18px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<button>Button at the Center</button>
</div>
</body>
</html>
Here, the button will be placed at the center of the vertical and horizontal positions.
The display
property with the grid
value is used within the container. Therefore, it will affect the container while the margin
property as auto
is used in the button
element, which will affect the button.
These two properties play an essential role in centering a button.
Center a Button Using display: flex
This is the most used method when aligning a button to the center. Here are three properties: display: flex;
, justify-content: center;
, and align-items: center;
, which play an essential role in centering a button.
This example demonstrates the button’s alignment at the center of the vertical and horizontal positions.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
border: 2px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
button {
background-color: lightpink;
color: black;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<button>Button at the Center</button>
</div>
</body>
</html>
Centering a Button Using position: fixed
We are giving a 50% margin from the left side of the page and then set the position: fixed
that will take just the position on the center of the body in the following example:
<!DOCTYPE html>
<html>
<head>
<style>
button {
position: fixed;
left: 50%;
}
</style>
</head>
<body>
<div class="button-container-div">
<button>Button at the Center</button>
</div>
</body>
</html>
Here, the button does not apply to the center of the whole web page.
Center Two or More Buttons
If there are two or more buttons, we can wrap all those buttons in one div
element and then use the flexbox property to align buttons at the center. If two buttons are considered as one div element, all the properties will be applied to both.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-box {
display: flex;
}
.jc-center {
justify-content: center;
}
button.margin-right {
margin-right: 20px;
}
</style>
</head>
<body>
<div class="flex-box jc-center">
<button type="submit" class="margin-right">Select</button>
<button type="submit">Submit</button>
</div>
</body>
</html>
Alternatively, we can center both inline-block and block elements using flexbox as per the following example:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-box {
display: flex;
}
.jc-center {
justify-content: center;
}
</style>
</head>
<body>
<div class="flex-box jc-center">
<button type="submit">Select</button>
</div>
<br>
<div class="flex-box jc-center">
<button type="submit">Submit</button>
</div>
</body>
</html>
Conclusion
There are numerous methods to center a button using different properties in CSS and HTML. As mentioned above, different approaches can be used to make a button or buttons center in a web page easily using the various properties of CSS jointly with HTML.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.