我有一个div，宽度为100%。
我想在其中居中一个按钮，我该怎么做呢?
< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
当前回答
使用flexbox
.Center {
display: flex;
align-items: center;
justify-content: center;
}
然后将类添加到按钮中。
<button class="Center">Demo</button>
其他回答
你可以这样做:
< span style=" font - family:宋体;边框:1px实心"> <input type="button" value="button"> < / div >
或者你可以这样做:
< span style=" font - family:宋体 <input type="button" value="button" style="display: block;保证金:0自动;" > < / div >
第一个将中心对齐div内的所有内容，另一个将中心对齐按钮。
由于提供了有限的细节，我将假设最简单的情况，并说你可以使用text-align: center:
http://jsfiddle.net/pMxty/
响应式CSS选项，将按钮垂直和水平居中，而不考虑父元素大小(使用数据属性挂钩的清晰度和分离问题):
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/
使用flexbox
.Center {
display: flex;
align-items: center;
justify-content: center;
}
然后将类添加到按钮中。
<button class="Center">Demo</button>
在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>
