Question

我希望完成一些事情 -

设置容器以适应视口高度和宽度的100％;
将h1在该容器中垂直和水平居中;
在h1下面添加一段文字，但没有此段向上推h1或打破居中。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用flex，事情可以很容易，下面的文本可以设置在绝对位置，html会在需要时滚动：

＆＃13;

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

＆＃13;

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

＆＃13;

注意，这里有效的是p {position:absolute;}以及如果HTML超出底线，p将显示滚动条的事实。 Flex可以轻松集中h1，但流程中的其他居中技术将以inline-block或table/table-cell作为基础... {/ p>

所以你可以在你的midle中心放置一个完整的网站h1：

＆＃13;

html {height:100%}

＆＃13;

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

＆＃13;

Answer 4

您可以将p和h1放入div，然后将div margin-top提供给等于50％的视口和margin - 左/对汽车

＆＃13;

* {
  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
}

＆＃13;

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

＆＃13;

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

4 个答案: