How to center a button within a div?

Solution 1:

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;
}

or

div{
    text-align:center;
}

Solution 2:

You could just make:

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

Or you could do it like this instead:

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

The first one will center align everything inside the div. The other one will center align just the button.

Solution 3:

et voila:

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

Update: If OP is looking for horizontal and vertical centre, this answer will do it for a fixed width/height element.

Solution 4:

Margin: 0 auto; is the correct answer for horizontal centering only. For centering both ways something like this will work, using jquery:

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

Update ... five years later, one could use flexbox on the parent DIV element to easily center the button both horizontally and vertically.

Including all browser prefixes, for best support

div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -moz-box-align    : center;
  -ms-flex-align    : center;
  -webkit-align-items : center;
  align-items : center ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

#container div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>