如何将div中的按钮居中？

Question

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

我想把一个按钮放在其中,我该怎么做？

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

Answer 1

更新的答案

更新,因为我注意到它是一个积极的答案,但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;
}

Answer 2

你可以做

<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中的所有内容.另一个将中心对齐按钮.

Answer 3

et voila:

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

更新:如果OP正在寻找水平和垂直中心,这个答案将针对固定的宽度/高度元素进行.

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

你应该在这里简单地说:

首先,您拥有文本或按钮的初始位置:

<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是标签保存按钮标签

风格:"text-align:center;"

Finaly结果代码将是:

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

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

http://jsfiddle.net/pMxty/

Answer 7

使用flexbox

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

然后将类添加到按钮中.

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