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

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

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

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

当前回答

使用flexbox

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

然后将类添加到按钮中。

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

其他回答

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

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

点击这里使用JSFiddle

更新后的答案

更新是因为我注意到这是一个积极的答案，但现在Flexbox将是正确的方法。

现场演示

垂直和水平对齐。

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

只是水平(只要主伸缩轴是水平的，这是默认的)

#wrapper {
  display: flex;
  justify-content: center;
}

原来的答案使用固定宽度和不灵活

如果原来的海报想要垂直和中心对齐，它很容易固定宽度和高度的按钮，尝试以下

现场演示

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

对于水平对齐使用任何一种

button{
    margin: 0 auto;
}

div{
    text-align:center;
}

你可以这样做:

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

使用flexbox

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

然后将类添加到按钮中。

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

推荐文章