css - 垂直对齐 100vh 容器内的文本

Question

我已经尝试了我能找到的关于这个主题的所有建议方法，但无法使任何方法起作用。我使用 vertical-align/line-height 方法垂直对齐图像，但不知道如何垂直对齐文本框。

-- 问题解决后删除 url --

向下滚动到第二个或第三个问题，查看我需要的页面类型示例。我希望比我更有经验的人可以立即发现我哪里出错了，如果有帮助，我可以提供相关的代码片段。

提前致谢

Answer 1

Flexbox 消除了很多布局的痛苦，垂直居中就是其中之一。

方法一:

.container {
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

方法二:

.container {
  height: 100vh;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
}

您的 HTML 只需如下所示:

<div class="container">

   <div>
      whatever content you want (including nested div's, other elements) goes in here
   </div>

</div><!-- .container -->