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

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

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

< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / 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将是正确的方法。

现场演示

垂直和水平对齐。

#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;
}

最简单的方法是输入一个“div”，给它一个“margin:0 auto”，但如果你想让它居中，你需要给它一个宽度

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

想起来:

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

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

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

http://jsfiddle.net/pMxty/

推荐文章