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

Question

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

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

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

提前致谢

Answer 1

将文本放入包含 div 的容器中，并赋予 div 以下样式（注意 100vh 容器需要非静态定位）：

.vertical-center{
    position: absolute;
    top:50%;
    left: 0%;
    transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
}

如果 100vh 容器小于文本占用的区域，这将崩溃，因此需要适当的 min-height。

Answer 2

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 -->

Answer 3

这可能是最简单的方法。在你的 div 中有 height: 100vh; 添加行高 100vh:

.hero{
  height: 100vh;
  line-height: 100vh;
}

然后在包含您的文本的 div 中确保它看起来像这样。

.hero-caption{
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  line-height:1.5em;
  margin: 0 auto;
  float: none;
  width:100%;
}

现在，如果您正在使用 Bootstrap，请执行以下操作。

HTML:

<header>
  <div class="col-md-12 caption">
    <h1>Hello World, Hi World</h1>
  </div>
</header>

CSS

header{
  background: blue;
  color: white;
  height: 100vh;
  line-height: 100vh;
}

.caption{
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  line-height:1.5em;
  margin: 0 auto;
  float: none;
}

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

Vertically align text inside 100vh container

html

css

responsive-design

HTML:

CSS