如何在div中将按钮居中？

我有一个div，其宽度为100％。

我想将按钮居中放置，该怎么办？

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

更新的答案

由于我注意到这是一个积极的答案，所以进行了更新，但是Flexbox现在是正确的方法。

现场演示

垂直和水平对齐。

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

只是水平的（只要主伸缩轴是水平的，这是默认值）

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

使用固定宽度且没有flexbox的原始答案

如果原始海报想要垂直和居中对齐，则对于固定按钮的宽度和高度非常容易，请尝试以下操作

现场演示

的CSS

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

仅用于水平对齐

button{
    margin: 0 auto;
}

要么

div{
    text-align:center;
}

您可以这样做：

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

或者，您也可以这样做：

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

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

等：

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/

使用flexbox

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

然后将类添加到您的按钮。

<button class="Center">Demo</button> 

您应该在这里简化一下：

首先，您具有文本或按钮的初始位置：

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

通过将此CSS代码行添加到h2标签或包含button标签的div标签中

样式：“ text-align：center;”

最终结果代码为：

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

遇到了这个问题，以为我也会留下我使用的解决方案，该解决方案利用line-height并text-align: center同时进行垂直和水平居中：

点击这里工作JSFiddle

要将<button type = "button">垂直和水平居中放置在<div>动态计算宽度的位置（如您的情况），请执行以下操作：

1. 设置text-align: center;为包装<div>：每当您调整<div>（或更确切地说是窗口）大小时，它将使按钮居中

2. 对于垂直对齐，您需要设置margin: valuepx;按钮。这是关于如何计算的规则valuepx：

   valuepx = (wrappingDIVheight - buttonHeight)/2

这是一个JS Bin演示。

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

最简单的方法是将其输入为“ div”，并​​给其“ margin：0 auto”，但如果要使其居中，则需要给定宽度

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

响应CSS选项垂直和水平居中的按钮不与父元素大小被关注（使用数据属性钩为了清楚和分离问题）：

的HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

的CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

小提琴：https : //jsfiddle.net/crrollyson/zebo1z8f/

以响应方式将按钮居中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>

假设div是#div并且button是#button：

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

然后照常将按钮嵌套到div中。