如何在div中居中一个按钮?

更新后的答案

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

像这样:

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

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

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

http://jsfiddle.net/pMxty/ < a href = " http://jsfiddle.net/pMxty/ " > < / >

Margin: 0 auto;是水平定心的正确答案。 对于居中这两种方式，使用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);

< em >更新……五年后，你可以在父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>

假设div是#div, button是#button:

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


#button {}

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

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

点击这里for working JSFiddle

你可以这样做:

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

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

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

使用flexbox

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

然后将类添加到按钮中。

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

要在<button type = "button">中使一个<button type = "button">在垂直和水平方向居中，<div>的宽度是动态计算的，就像在你的例子中一样，这样做:

1. 将text-align: center;设置为包装<div>:当你调整<div>(或者窗口)的大小时，这将使按钮居中。
2. 对于垂直对齐，你需要为按钮设置margin: valuepx;。这是关于如何计算valuepx的规则:

   valuepx = (wrappingDIVheight - buttonHeight)/2 < / p >

这是一个JS Bin demo . JS Bin demo。

响应式CSS选项，将按钮垂直和水平居中，而不关心父元素大小(使用数据属性挂钩来明确和分离问题):

超文本标记语言

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

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

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

你应该把它简单化:

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

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

结果代码将是:

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