Button Center CSS

I realize this is a very old question, but I stumbled across this problem today and I got it to work with

<div style="text-align:center;">
    <button>button1</button>
    <button>button2</button>
</div>

Cheers,
Mark

Align button to center of div

Just add style="text-align:center" in the parent div of the button:

<div class="form-group" style="text-align: center">
  <button type="submit">Send message</button>
</div>

How to center the text to the middle of a button?

While one thing that seems OK is centering of the text, your HTML has these problems:

Error: The element button must not appear as a descendant of the a
element.
Error: Element p not allowed as child of element button in this
context

So this snippet removes these two elements and moves the CSS button styling onto the anchor element. It makes this inline-flex to help center the text.

Note: the text is centered though it can sort of appear as if it's a bit high because of the visual strength of the shadow. This snippet puts a 1px width border on the element just so you can assure yourself the text is centered.

.btn1 {
  width: 160px;
  height: 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: inline-flex;
  border-radius: 60px;
  background-color: white;
  border-color: #05434a;
  border-width: 1px;
  border-style: solid;
  box-shadow: 5px 6px #05434a;
  text-transform: uppercase;
  font-size: 1.7vh;
  margin-left: auto;
  margin-right: auto;
  font-family: poppins;
  padding: 0px;
}

.nd {
  text-decoration: none;
}

.social-link {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0 !important;
}

<div class="social-link">
  <a class="nd btn1" href="">
        text
  </a>
</div>

How to align a button to the center of the screen html

You should use something like this:

<div style="text-align:center">  
    <input type="submit" />  
</div>

Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.

<input type="submit" style="width: 300px; margin: 0 auto;" />

How to center a button in Javascript

If I understand you correctly you want to center an already created button, it could work something like this:

<!--In only HTML-->
<button style="position: absolute; left: 50%; transform: translateX(-50%);">Click Me</button>

Another way to do it is to set an id to the button and then center it in a separate CSS file or in the <style> tag like so:

<!--HTML-->
<button id="myButton">Click Me</button>

/*  
  CSS 
  Remember to use a # before the name because it's an id you're trying to reach
*/
#myButton {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Or you could use JavaScript with the same HTML base

<!--HTML-->
<button id="myButton">Click Me</button>

And then in a separate JavaScript file or in the <script> tag

// Javascript
let myButton = document.querySelector("#myButton");  myButton.style.position = "absolute";
myButton.style.left = "50%";
myButton.style.transform = "translateX(-50%)";

How to center a button in Html?

Just use margin to achieve this.

button {
  width: auto;
  display: block;
  margin: auto;
}

<div style="background-color:rgba(129,180,30, 0.9); width: 40%; margin-top: 50px; padding-left:10px; padding-right:10px; padding-top:10px; text-align:justify">
<h2>Proteger para progresar</h2>
<h5>La condición humana está muy ligada al progreso. En mayor o menor medida, todos queremos progresar en aquellos ámbitos en los que nos centramos en nuestro día a día. Los padres quieren que sus hijos estudien y sean buenas personas para que les vaya bien en la vida.</h5>
<button href="https://mediassegur.com/proteger-para-progresar">Leer mas</button>
</div>

Getting button to align center in Bootstrap card footer

Here you go... You forgot to add d-flex.

Change this...

<div class="card-footer justify-content-center">                    
   <button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
      <div class="col-10 text-start">Tell Me</div>
      <div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
   </button>
</div>

...to this.

<div class="card-footer d-flex justify-content-center">                    
   <button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
      <div class="col-10 text-start">Tell Me</div>
      <div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
   </button>
</div>

Button Center CSS