如何在 <div> 中水平居中 <input>？

Question

我尝试了多次，使用 Stack Overflow 中的多种不同可能解决方案来完成此任务，但令人沮丧的是，我似乎无法将输入框置于 div 的中心。

我的代码现在基本上看起来像这样：

 div {
  width: 100vw;
  position: relative
}

h1 {
  text-align: center;
}

 <div>
  <h1>Title</h1>
  <input type='text'>
</div>

目前，“标题”一词位于屏幕中央，但输入框仍在左侧。

有什么办法可以使div水平居中？

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

Answer 1

将 flexbox 应用于容器 div 。

注意：居中 h1 在应用 flex 后变得不必要

 div {
  width: 100vw;
  position: relative;

  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

 <div>
  <h1>Title</h1>
  <input type='text'>
</div>

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

Answer 2

显示块。输入元素是内联的。

 <input type='text' style="display:block; margin : 0 auto;">

原文由 Gergő Tar 发布，翻译遵循 CC BY-SA 3.0 许可协议