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: gridandmargin: 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-alignproperty of the parentdivtag ascenter.margin: auto- Enter the value of themarginproperty toauto.display: flex- Enter the value of thedisplayproperty toflexand set the value of thejustify-contentproperty tocenter.display: grid- Enter the value of thedisplayproperty 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.