如何在div中居中按钮?

I have a div that's width is 100%.

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

I'd like to center a button within it, how might I do this?

我想把一个按钮放在里面，我该怎么做呢?

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

12 个解决方案

#1

Updated Answer

更新后的答案

Updating because I noticed it's an active answer, however Flexbox would be the correct approach now.

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

Live Demo

现场演示

Vertical and horizontal alignment.

垂直和水平对齐。

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

Just horizontal (as long as the main flex axis is horizontal which is default)

只是水平的(只要主弯曲轴是水平的，这是默认)

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

Original Answer using a fixed width and no flexbox

最初的答案是使用固定的宽度，而不使用flexbox。

If the original poster wants vertical and center alignment its quite easy for fixed width and height of the button, try the following

如果原始的海报想要垂直和中心对齐，它很容易为固定的宽度和高度按钮，尝试以下

Live Demo

现场演示

CSS

CSS

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

for just horizontal alignment use either

对于水平对齐也可以使用

button{
    margin: 0 auto;
}

or

或

div{
    text-align:center;
}

#2

you could just make

你可以让

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

Or ou could do like this

或者你可以这样做

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

The first one will center align everything inside the div. The other one will center align just the button.

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

#3

et voila:

像这样:

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

Update: If OP is looking for horizontal and vertical centre, this answer will do it for a fixed width/height element.

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

#4

Margin: 0 auto; is the correct answer for horizontal centering only. For centering both ways something like this will work, using jquery:

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

---

Update ... five years later, one could use flexbox on the parent DIV element to easily center the button both horizontally and vertically.

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

Including all browser prefixes, for best support

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

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>

#5

With the limited detail provided, I will assume the most simple situation and say you can use text-align: center:

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

http://jsfiddle.net/pMxty/

http://jsfiddle.net/pMxty/

#6

Using flexbox

使用flexbox

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

And then adding the class to your button.

然后将类添加到按钮中。

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

#7

Supposing div is #div and button is #button:

假设div是#div，按钮是#按钮:

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

#button {}

Then nest the button into div as usual.

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

#8

Came across this and thought I'd leave the solution I used as well, which utilizes line-height and text-align: center to do both vertical and horizontal centering:

遇到这个问题，我想我也应该放弃我使用的解决方案，该方案利用了行高和文本对齐:center来做垂直和水平的定心:

Click here for working JSFiddle

单击此处查看工作JSFiddle

#9

To center a <button type = "button"> both vertically and horizontally within a <div> which width is computed dynamically like in your case, this is what to do:

将垂直和水平居中于

，宽度像您的例子一样是动态计算的，以下是要做的:

1. Set text-align: center; to the wrapping <div>: this will center the button whenever you resize the <div> (or rather the window)
2. 设置text-align:中心;对于换行
   :当您调整

   (或者更确切地说是窗口)的大小时，这个按钮就会居中

3. For the vertical alignment, you will need to set margin: valuepx; for the button. This is the rule on how to calculate valuepx:

   对于垂直对齐，需要设置裕度:valuepx;的按钮。这是计算valuepx的规则:

   valuepx = (wrappingDIVheight - buttonHeight)/2

   valuepx = (wrappingDIVheight - buttonHeight)/2

Here is a JS Bin demo.

这是一个JS Bin演示。

#10

Easiest thing is input it as a "div" give it a "margin:0 auto " but if you want it to be centered u need to give it a width

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

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

#11

Responsive CSS option to center a button vertically and horizontally without being concerned with parent element size (using data attribute hooks for clarity and separation concerns):

响应性CSS选项，垂直和水平地居中一个按钮，而不考虑父元素的大小(使用数据属性钩子来保持清晰和分离):

HTML

HTML

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

CSS

CSS

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

Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/

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

#12

Responsive way to center your button in a div:

响应方式，以中心您的按钮在一个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>