我有一个div,宽度为100%。

我想在其中居中一个按钮,我该怎么做呢?

< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >


当前回答

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

点击这里使用JSFiddle

其他回答

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

http://jsfiddle.net/pMxty/

想起来:

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

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

使用flexbox

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

然后将类添加到按钮中。

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

响应式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/

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