如何使input位于main容器内居中H1下方并保持布局？

嘿，这个问题其实是flexbox的默认布局特性在搞怪！你的.main容器用flex实现了h1的居中，但flex布局默认的flex-direction: row会让所有子元素横向排列，这就是为什么input会跑到h1右边的原因。

最简单的解决方案 #

给你的.main容器添加flex-direction: column属性，把flex的主轴方向从横向改成纵向：

.main {
  height: 100vh; /* 用vh确保占满视口高度，你原来的height:100%需要父元素也设置高度 */
  width: 100%;
  display: flex;
  flex-direction: column; /* 关键属性！ */
  justify-content: center; /* 现在控制垂直方向的居中 */
  align-items: center; /* 控制水平方向的居中 */
}

这样修改后，.main里的h1和input会自动从上到下排列，同时还能保持你想要的垂直+水平居中效果。

为什么原来的inline/inline-flex没用？ #

因为flex容器的子元素（flex item）默认是flex: 0 1 auto，不管你给input设置inline还是inline-flex，它依然是flex容器的子元素，会严格遵循flex容器的排列规则，所以改这些属性不会改变横向排列的现状。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      padding: 0;
      margin: 0;
      height: 100%; /* 确保body占满视口高度，这样.main的100%才有效 */
    }
    .main {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    h1 {
      margin: 0 0 20px 0; /* 可以加个margin让h1和input之间有间距 */
    }
  </style>
</head>
<body>
  <div class="main">
    <h1>我是标题</h1>
    <input type="text" placeholder="我是输入框">
  </div>
</body>
</html>

如果不想改变flex方向，还有一种替代方案：给h1设置width: 100%或者flex-basis: 100%，让h1占满flex容器的一行，这样input就会自动换行到下方，但这种方法不如修改flex-direction直接直观，推荐用第一种方案。

内容的提问来源于stack exchange，提问作者user9221814