如何在div中将按钮居中？

Question

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

我想在其中放置一个按钮，我该怎么做？

 <div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

原文由 Shai UI 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新的答案

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

现场演示

垂直和水平对齐。

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

只是水平的（只要主要的弹性轴是水平的，这是默认的）

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

使用固定宽度且没有 flexbox 的原始答案

如果原始海报想要垂直和居中对齐，那么固定按钮的宽度和高度很容易，请尝试以下操作

现场演示

CSS

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

仅用于水平对齐使用

button{
    margin: 0 auto;
}

或者

div{
    text-align:center;
}

原文由 Loktar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以做：

 <div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

或者你可以这样做：

 <div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

第一个将使 div 内的所有内容居中对齐。另一个将仅居中对齐按钮。

原文由 RenatoSz 发布，翻译遵循 CC BY-SA 4.0 许可协议