如何在 div 中使按钮居中？答案

【问题标题】：How to center a button within a div?如何在 div 中使按钮居中？
【发布时间】：2011-11-25 12:37:31
【问题描述】：

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

我想在其中居中放置一个按钮，我该怎么做？

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

【问题讨论】：

您使用的按钮代码是什么？
我怀疑他想要垂直和水平居中。到目前为止，没有一个解决方案可以做到这一点。 CSS 不太擅长垂直居中 =(.
我只想说 flexbox 让这个答案在 2014 年毫无用处。是啊宝贝！
trying to align html button at the center of the my page 的可能重复项

标签： html css centering

【解决方案1】：

最简单的方法：

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

【讨论】：

这并没有真正使按钮居中，因为margin-left 是相对于按钮的左侧而不是其中心。解决此问题的一种方法是向按钮添加宽度 width: [button width] 并将 margin-left 值设置为 calc(50% - [button width])

【解决方案2】：

更新答案

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

Live Demo

垂直和水平对齐。

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

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

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

【讨论】：

-1 这太糟糕了。基本上，您将宽度设置为 100%，然后将边距设置为 -50。但是会导致其他问题，例如按钮高于包含元素，并且无法很好地调整大小。
嘿，感谢您至少解释了您对@Imray 的反对意见，另外请注意，我说的是 fixed 宽度和高度，而不是可变的。所以调整大小不是一个因素。 “基本上”我将宽度设置为 100px，而不是 100%，并将边距设置为 -50px，即一半。这是一种非常标准的居中方法。我期待你的回答虽然:)
你的祝福（对不起，你有幽默感，很高兴你有幽默感）我的意思是 100px。我没有意识到你写了“固定”，但我仍然认为这个答案在大多数情况下都不是很好

【解决方案3】：

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”中使用它。

【讨论】：

【解决方案4】：

瞧：

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

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

【讨论】：

你可能还需要 "display: block;"
@SoluableNonagon 就是这样！ "display: block" 用 "margin: 0 auto" 来解决问题

【解决方案5】：

你可以做：

<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> 工作过！

【解决方案6】：

你应该把它简单了：

首先你有你的文本或按钮的初始位置：

<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标签

样式：“文本对齐：中心；”

最终结果代码将是：

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

【讨论】：

【解决方案7】：

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

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

#button {}

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

在 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>

【讨论】：

这个答案可以通过删除内联样式并显示一个演示来改进

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

【讨论】：

jQuery?认真的吗？
@PraneshRavi - 在 2011 年，CSS 中没有很多选项可以垂直居中，所以是的，如果你不知道元素的确切高度和宽度，javascript 并不少见，并且可以减去边距。
您始终可以使用 flex 将元素垂直和水平居中。
@PraneshRavi - 是的，你可以，flexbox 是这个问题的一个很好的答案，我会补充一点，但是在 2011 年没有 flexbox。
@JGallardo - 我认为您错过了其他答案试图使按钮不仅水平居中而且垂直居中的部分，而且 9 年前没有任何好的选择仅使用 CSS 即可

【解决方案12】：

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

将text-align: center; 设置为包裹<div>：这将使按钮在您调整<div>（或者更确切地说是窗口）大小时居中
对于垂直对齐，您需要为按钮设置margin: valuepx;。这是valuepx的计算规则：

valuepx = (wrappingDIVheight - buttonHeight)/2

这是JS Bin demo。

【讨论】：

【解决方案13】：

使用弹性盒

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

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

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

【讨论】：

【解决方案14】：

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

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

【讨论】：

【解决方案15】：

遇到这个问题，我想我也会放弃我使用的解决方案，它利用 line-height 和 text-align: center 进行垂直和水平居中：

Click here for working JSFiddle

【讨论】：

【解决方案16】：

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

http://jsfiddle.net/pMxty/

【讨论】：