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

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

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

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

当前回答

更新后的答案

更新是因为我注意到这是一个积极的答案，但现在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内的所有内容，另一个将中心对齐按钮。

想起来:

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

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

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

使用flexbox

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

然后将类添加到按钮中。

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

div { Text-align: center; ｝按钮{ 宽度:50%; 保证金:1rem auto; ｝ < div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >

这是我经常做的事。我认为bootstrap也在“mx-auto”中使用这个。

推荐文章