Html 如何在div中居中按钮？

How to center a button within a div?

提问by foreyez

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%; border: 1px solid">
  <button type="button">hello</button>
</div>

回答by Loktar

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)

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

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

回答by RenatoSz

You could just make:

你可以做：

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

Or you could do it like this instead:

或者你可以这样做：

<div style="border: 1px solid">
  <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 内的所有内容。另一个将仅居中对齐按钮。

回答by Pat

et voila:

等等：

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

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

更新：如果 OP 正在寻找水平和垂直中心，则此答案将针对固定宽度/高度的元素进行。

回答by adeneo

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>

回答by James Montagne

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

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

http://jsfiddle.net/pMxty/

http://jsfiddle.net/pMxty/

回答by yask

Using flexbox

使用弹性盒

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

And then adding the class to your button.

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

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

回答by nadir hamidou

You should take it simple here you go :

你应该在这里简单一点：

first you have the initial position of your text or 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>

By adding this css code line to the h2tag or to the divtag that holds the button tag

通过添加这个CSS代码行到H2标签或到DIV是标签保存按钮标签

style:" text-align:center; "

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

Finaly The result code will be :

最后结果代码将是：

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

回答by JGallardo

Super simple answer that will apply to most cases is to just make set the margin to 0 autoand set the display to block. You can see how I centered my button in my demo on CodePen

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

回答by Billal Begueradj

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:

要将 a<button type = "button">垂直和水平居中<div>，在您的情况下动态计算宽度，这是要执行的操作：

1. Set text-align: center;to the wrapping <div>: this will center the button whenever you resize the <div>(or rather the window)

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

   valuepx = (wrappingDIVheight - buttonHeight)/2

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

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

   valuepx = (wrappingDIVheight - buttonHeight)/2

Here is a JS Bin demo.

这是一个JS Bin 演示。

回答by lhan

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

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

Click here for working JSFiddle

单击此处查看工作 JSFiddle