如何中心button内的一个div？
我有一个div的宽度是100％。
我想把一个button放在里面，我该怎么做？
<div style="width:100%; height:100%"> <button type="button">hello</button> </div> 更新的答案
更新，因为我注意到这是一个积极的答案，但是Flexbox现在是正确的方法。
现场演示
垂直和水平alignment。
#wrapper { display: flex; align-items: center; justify-content: center; }
只要水平（只要主要的水平轴是默认的水平轴）
#wrapper { display: flex; justify-content: center; }
原始答案使用固定宽度，没有弹性盒
如果原始海报想要垂直和中心alignment，则对于固定宽度和高度的button非常容易，请尝试以下操作
现场演示
CSS
button{ height:20px; width:100px; margin: -20px -50px; position:relative; top:50%; left:50%; }
只是水平alignment使用
button{ margin: 0 auto; }
要么
div{ text-align:center; }
你可以做
<div style="text-align: center;"> <input type="button" value="button"> </div>
或者你可以这样做
<div> <input type="button" value="button" style="display: block; margin: 0 auto;"> </div>
第一个将居中alignment内部的一切。 另一个将中心alignmentbutton。
等等：
button { width: 100px; // whatever your button's width margin: 0 auto; // auto left/right margins }
更新 ：如果OP正在寻找水平和垂直中心， 这个答案将做一个固定的宽度/高度的元素。
保证金：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轻松地在水平和垂直方向上居中button。
包括所有浏览器前缀，以获得最佳支持
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>
提供有限的细节，我会承担最简单的情况，并说你可以使用text-align: center ：
使用flexbox
.Center { display: flex; align-items: center; justify-content: center; }
然后将该类添加到您的button。
<button class="Center">Demo</button>
假设div是#div，button是#button：
#div { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: center; } #button {}
然后像平常一样将buttonembeddeddiv。
遇到这个，我想我会离开我使用的解决scheme，它利用line-height和text-align: center做垂直和水平居中：
点击这里工作JSFiddle
最简单的事情是input它作为一个“股利”给它一个“保证金：0汽车”，但如果你想要它居中你需要给它一个宽度
Div{ Margin: 0 auto ; Width: 100px ; }
要在一个<div>垂直和水平居中放置一个<button type = "button">这个宽度是dynamic计算的，就像你的情况那样：
- 设置
text-align: center;到包装<div>：这将中心的button，每当你调整<div>（或者说窗口） -
对于垂直alignment，您需要设置
margin: valuepx;为button。 这是如何计算valuepx的规则：valuepx = (wrappingDIVheight - buttonHeight)/2
这是一个JS斌演示 。
响应CSS选项垂直和水平居中button，而不关心父元素的大小（使用数据属性钩子的清晰度和分离问题） ：
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/
