Question

我已经尝试了所有建议的方法，我可以找到这个主题，但无法让任何工作。我使用vertical-align / line-height方法垂直对齐图像，但无法弄清楚如何垂直对齐文本框。

- 问题解决后删除了网址 -

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

提前致谢

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

Answer 2

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

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

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

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容器内垂直对齐文本

3 个答案:

HTML：

CSS