How to Center a Button Within a Div

How to center a button within a div?

Updated Answer

Updating because I noticed it's an active answer, however Flexbox would be the correct approach now.

Live Demo

Vertical and horizontal alignment.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Just horizontal (as long as the main flex axis is horizontal which is default)

#wrapper {
  display: flex;
  justify-content: center;
}

Original Answer using a fixed width and no flexbox

If the original poster wants vertical and center alignment its quite easy for fixed width and height of the button, try the following

Live Demo

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

for just horizontal alignment use either

button{
    margin: 0 auto;
}

div{
    text-align:center;
}

Center a button inside a DIV

If you add text-align center to the parent container, the button will center horizontally. Then you can use the top:50%; transform: translateY(-50%); trick to center vertically.

HTML

<div id="buttonDiv">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>

CSS

#buttonDiv {
        position: fixed;
        width:200px;
        height:200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border-bottom-width:1px;
        border-top-width:1px;
        border-right-width:1px;
        border-left-width:1px;
        border-style:solid;
        border-color:#000000;
        text-align:center;
}

button {
   position:relative;
   top: 50%;
   transform: translateY(-50%);
}

jsfiddle option 1

EDIT BELOW

If you need to keep the '.button' div, you can just move the top:50%; transform: translateY(-50%); to that class.

HTML

<div id="buttonDiv">
    <div class="button">
         <button type="submit" onClick="setSid()">Click here to Start Test</button>
    </div>
</div>

CSS

#buttonDiv {
   position: fixed;
   width:200px;
   height:200px;
   top: 50%;
   left: 50%;
   margin: -100px 0px 0px -100px;
   border: 1px solid #000;
   text-align:center;
}
.button {
   position:relative;
   top: 50%;
   transform: translateY(-50%);
}

jsfiddle option 2

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>

Centering a button inside a p inside a div

I'm deleted code in .acquista

position: relative;
left: 130px;

Then added Css like this:

#libri button {
margin: 0 auto;
display: block;
}

So will got like this snippet

#libri div {
    height: 250px;
    width: 430px;
    display: inline-block;
    overflow: hidden;
    float: left;
    /*border:1px solid;*/
    margin-bottom: 5px;
    margin-right: 5px;
}

#libri div>img {
    vertical-align: middle;
}

#libri div:hover {
    background-color: #5fed8c;
    transition: 0.8s ease;
}

#libri p {
    display: inline-block;
    width: 250px;
    text-align: left;
    font-family: Lato;
    font-size: 17px;
    vertical-align: top;
}
#libri button {
    margin: 0 auto;
    display: block;
}
.acquista {
    background-color: #9be8b3;
    border: 2px solid #000000;
    border-radius: 5px;
    color: #000000;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
}

<section id="libri">
        <div class="book1">
        <img src="images/alberolaura.jpg" height="250px" width="170px" alt="L'albero Laura">
        <p><a href="#" target="_blank"><button class="acquista"><i class="fa fa-shopping-cart"></i>  Acquista</button></a> <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur</p>
        </div>
        </section>

Center aligning buttons inside div dynamically?

You need to use text-align: center on the container element. Also, avoid using inline styles...

<div style="margin: 0 auto; width: 656px; text-align: center;">

Demo

Note: Make sure that you use text-align: left; if you have any text
inside that div else they will be centered as well.

As you commented, it looks like center to me

Sample Image

Still you are not believing that they are perfectly centered, I would tweak the containers width and will show you that they are centered....

Sample Image

With 2 Buttons

Sample Image

Note: Make sure you use CSS Reset as well... So that you get
consistent styles in all browsers though this should be centered
regardless of resetting the styles.

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;" />

Center button within a div

EDIT

It now works with 95%. SEE NEW UPDATED DEMO

Here's what I added to your media query:

.pure-controls{
margin:0 auto;
width:100%;
text-align:center;
}
.pure-controls button{
width:95%;
display:inline-block;

}

I think I figured it out. SEE DEMO

I added this to your media queries:

.pure-controls{
width:100%;
text-align:center;
}
.pure-controls button{
display:inline-block;

}

How to Center a Button Within a Div