xxxxxxxxxx
Wrap button in a div with `display: flex`
add `margin: auto` to button
xxxxxxxxxx
button{
/*Change the width as much as you like, but make sure
margin-left and margin-right + width = 100%*/
width:50%;
margin-left:25%;
margin-right:25%;
}
xxxxxxxxxx
<style>
.centered-button {
text-align: center;
display: inline-block;
}
</style>
<button class="centered-button">Click Me!</button>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles for centering the button */
.centered-button {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="centered-button">
<button>Centered Button</button>
</div>
</body>
</html>
xxxxxxxxxx
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.