100% viewport vertical center with content following

Question

I am looking to accomplish a few things-

1. Set a container to fit 100% of viewport height and width;
2. Center the h1 vertically and horizontally in that container;
3. Add a paragraph of text beneath the h1 without this paragraph pushing the h1 up or breaking the centering.

Here's a diagram

I've already tried many of the methods discussed here and elsewhere (tables, display: table/table-cell + vertical align, using an inline-block with vertical align, etc) but the problem is that all of them either center both the h1 and the paragraph, or adding the paragraph under the h1 breaks it entirely. As the site is responsive, the h1 will likely become multiple lines of text on smaller screens. Is there a way to keep the h1 at the vertical and horizontal center while still adding content beneath it?

Answer 1

with flex, things can be easy, text underneath can be setted in absolute position and html will scroll if needed:

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>

Note, what works here is p {position:absolute;} and the fact that HTML will show a scroll bar if p goes beyond bottom. Flex makes it easy to center h1, but other centering technic within the flow will do (inline-block or table/table-cell ) with html {height:100%} as a basis ...

So you can a full site laying under your midle center 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>

Answer 2

You can put the p and h1 in a div, then give to the div margin-top equal to 50% viewport and 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 3

The use of flexbox is your best bet as it is very concise and has good browser support. Also, it's your best bet for future-thinking as it is forming the foundation of today's modern app layout infrastructure.

The <p> being not pushed down is just done by giving a 0 height so that its effects on its container is not realized.

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

Fiddle: https://jsfiddle.net/3ms3sggd/

A Great Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

Well, basically just give the p a height of zero. The max-width below is just for illustration, margin: 0 auto then centers that horizontally.

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>