最简单的方法是输入一个“div”，给它一个“margin:0 auto”，但如果你想让它居中，你需要给它一个宽度

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

最简单的方法是输入一个“div”，给它一个“margin:0 auto”，但如果你想让它居中，你需要给它一个宽度

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

你可以这样做:

< span style=" font - family:宋体;边框:1px实心"> <input type="button" value="button"> < / div >

或者你可以这样做:

< span style=" font - family:宋体 <input type="button" value="button" style="display: block;保证金:0自动;" > < / div >

第一个将中心对齐div内的所有内容，另一个将中心对齐按钮。

遇到这个，我想我也会留下我使用的解决方案，它利用line-height和text-align: center来做垂直和水平的居中:

点击这里使用JSFiddle

div { Text-align: center; ｝ 按钮{ 宽度:50%; 保证金:1rem auto; ｝ < div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >

这是我经常做的事。 我认为bootstrap也在“mx-auto”中使用这个。

保证金: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>