100% 视口垂直中心，内容跟随

Question

我希望完成一些事情-

1. 将容器设置为适合 100% 的视口高度和宽度；
2. 将 h1 在该容器中垂直和水平居中；
3. 在 h1 下方添加一段文本，但此段落不会将 h1 向上推或破坏居中。

Here's a diagram

我已经尝试过这里和其他地方讨论的许多方法（表格、显示：表格/表格单元格 + 垂直对齐、使用带有垂直对齐的内联块等），但问题是所有这些方法要么将 h1 和段落居中，或者在 h1 下添加段落会完全破坏它。由于网站是响应式的，h1 可能会在较小的屏幕上变成多行文本。有没有办法让 h1 保持在垂直和水平中心，同时仍然在它下面添加内容？

Answer 1

好吧，基本上只是给p 一个高度为零。下面的max-width 只是为了说明，margin: 0 auto 然后水平居中。

html, body {
  height: 100%
}

.container {
  display: table;
  height: 100%;
  width: 100%;
}

.v-center {
  display: table-cell;
  vertical-align: middle;
  text-align: center
}

p {
  height: 0;
  max-width: 200px;
  margin: 0 auto;
}

<div class="container">
  <div class="v-center">
    <h1>Heading</h1>
    <p>
      Paragraph paragraph paragraph paragraph paragraph paragraph
      paragraph paragraph paragraph paragraph paragraph paragraph...
    </p>
  </div>
</div>

Answer 2

使用flexbox 是您最好的选择，因为它非常简洁并且具有良好的浏览器支持。此外，它是您思考未来的最佳选择，因为它正在构成当今现代应用程序布局基础设施的基础。

<p> 不被推下只是通过提供0 高度来完成，这样它对容器的影响就不会实现。

HTML：

<div class="container">
    <h1>
        HI
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras neque tortor, auctor ut consectetur non, posuere a justo. Morbi nisi eros, pellentesque eget ullamcorper eu, tristique at tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent ornare odio lorem, vel fermentum est lacinia ut. Vivamus tincidunt augue scelerisque justo consectetur tincidunt. Phasellus lectus nibh, ultrices in dictum vel, pretium at nisl. Sed vehicula tortor sed facilisis accumsan. Sed cursus felis quis quam efficitur, id luctus mi aliquet. Morbi mattis gravida convallis. Sed non feugiat dolor, in gravida arcu. Morbi id dolor imperdiet, rhoncus ante convallis, varius lacus.
    </p>
</div>

CSS：

.container {
    align-items: center;
    background: red;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.container p {
    height: 0;
}

小提琴：https://jsfiddle.net/3ms3sggd/

出色的 Flexbox 指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

您可以将p 和h1 放在div 中，然后将margin-top 赋予div 等于50% 视口和margin-left/right auto

* {
  margin: 0;
  padding: 0
}

div {
  background-color: #fff;
  width: 400px;
  height: 100px;
  margin-top: 50vh;
  margin-left:auto;
  margin-right:auto;
  text-align: center
}

h1{
  margin-bottom: 20px
}

<div>
<h1>
header
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
</p>
</div>

Answer 4

有了flex，事情就变得简单了，下面的文字可以设置在绝对位置，html会根据需要滚动：

html {
  display:flex;
  height:100%;
  /* see center */
  background:linear-gradient(to left, transparent 50%, rgba(0,0,0,0.2) 50%),linear-gradient(to top, transparent 50%, rgba(0,0,0,0.2) 50%)
}
body {
  margin:auto;/* will shrink and center body on both axis */
  /* see me ? */
  background:rgba(0,0,0,0.2)
}
p {
  position:absolute;
  left:0;
  right:0;
  width:80%;/* set a width eventually */
  margin:auto;/* if you did set a width, then can be useful */
}
h1 {
  /*margin reset ? */
  margin:0;
  }

<h1>HI !,test me full page too</h1>
<p>Lesquelles habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

注意，这里有效的是p {position:absolute;}，如果p 超出底部，HTML 将显示滚动条。 Flex 使h1 居中变得容易，但流程中的其他居中技术（inline-block 或table/table-cell）以html {height:100%} 为基础......

所以你可以在你的中间中心 h1 下放置一个完整的站点：

html {
  display: flex;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.2) 50%) fixed
}
body {
  margin: auto;
  text-align: center;
}
.below {
  position: absolute;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
  text-align: left;
}

 <h1>HTML Ipsum Presents</h1>
<div class="below">


  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</div>