Question

我有一个宽度为100％的div。

我想在其中居中按钮，我该怎么做？

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

Answer 1

更新了答案

更新，因为我注意到它是一个积极的答案，但Flexbox现在是正确的方法。

<强> Live Demo

垂直和水平对齐。

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

只是水平（只要主弯曲轴是水平的，这是默认的）

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

原始答案使用固定宽度且没有弹性框

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

<强> Live Demo

<强> CSS

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

仅用于水平对齐

button{
    margin: 0 auto;
}

或

div{
    text-align:center;
}

Answer 2

你可以做到

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

或者你可以这样做

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

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

Answer 3

et voila：

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

更新：如果OP正在寻找水平和垂直中心，this answer将针对固定的宽度/高度元素执行此操作。

Answer 4

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

Answer 5

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

http://jsfiddle.net/pMxty/

Answer 6

使用flexbox

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

然后将课程添加到按钮中。

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

Answer 7

您应该在这里简单一点：

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

<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 标签或保存按钮标签的 div 标签

style：“ 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>

Answer 8

碰到了这个并认为我会留下我用过的解决方案，它利用line-height和text-align: center进行垂直和水平居中：

Click here for working JSFiddle

Answer 9

要<button type = "button">在<div>内垂直和水平居中，其宽度是动态计算的，就像你的情况一样，这是做什么的：

将text-align: center;设置为包裹<div>：每当您调整<div>（或更确切地说是窗口）时，这将使按钮居中
对于垂直对齐，您需要为按钮设置margin: valuepx;。这是关于如何计算valuepx：
的规则
valuepx = (wrappingDIVheight - buttonHeight)/2

这是JS Bin demo。

Answer 10

适用于大多数情况的超级简单答案是将边距设置为0 auto，并将显示设置为block。您可以在CodePen

的演示中看到如何将按钮居中

Answer 11

假设div是#div而按钮是#button：

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

#button {}

然后像往常一样将按钮嵌入div中。

Answer 12

最简单的事情是输入它作为＆＃34; div＆＃34;给它一个＆＃34;保证金：0 auto＆＃34;但如果你想让它居中，你需要给它一个宽度

.a.b.c{}

Answer 13

响应式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/

Answer 14

将按钮置于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>

Answer 15

div {
    text-align : center;
}
button {
    width: 50%;
    margin: 1rem auto;
}

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

这是我最常做的。
我认为引导程序也在“mx-auto”中使用它。

如何将div中的按钮居中？

15 个答案: