适用于大多数情况的超级简单的答案是将margin设置为0 auto并将显示设置为block。你可以看到我在CodePen的演示中如何居中我的按钮

想起来:

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

更新:如果OP正在寻找水平和垂直中心，这个答案将做一个固定的宽度/高度元素。

保证金:0自动;是水平定心的正确答案。 对于居中这两种方式，使用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);

更新……五年后，可以在父DIV元素上使用flexbox轻松地将按钮水平和垂直居中。

包括所有浏览器前缀，以获得最佳支持

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>

由于提供了有限的细节，我将假设最简单的情况，并说你可以使用text-align: center:

http://jsfiddle.net/pMxty/

在div中居中按钮的响应方式:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

要将<button type = "button">在<div>中垂直和水平居中，宽度是动态计算的，就像在你的例子中一样，下面是要做的:

设置文本对齐:居中;到换行<div>:当你调整<div>(或者窗口)的大小时，这将使按钮居中。 对于垂直对齐，你需要设置margin: valuepx;对于按钮。下面是计算valuepx的规则: valuepx = (wrappingDIVheight - buttonHeight)/2

这是一个JS Bin的演示。