How to center a button in CSS

To center a button in CSS, you can use several methods depending on the layout. Here are common ways:

1. Using Flexbox:
   css

   Copy code

   .container {
display: flex;
justify-content: center; /* Horizontal center */
align-items: center; /* Vertical center */
height: 100vh; /* Full viewport height */
}

2. Using Grid:
   css

   Copy code

   .container {
display: grid;
place-items: center; /* Centers both horizontally and vertically */
height: 100vh;
}

3. Using Text-align and Margin (for horizontal centering):
   css

   Copy code

   .container {
text-align: center;
}
.button {
margin: 0 auto; /* Horizontal centering */
}


These methods will center the button within its container element effectively.