I have a parent div that has two child divs. The parent div takes up the viewport height. The first child (the header) has to be at the top, while the second child (the text wrapper) has to be vertically centered. How can I make sure that the text wrapper will be vertically centered no matter what the screen size is?

One potential solution would be to set the header to be absolute, and setting top: 0px. Then centering the text wrapper can be done easily by setting align-items: center. But since I recently learned about viewport units, I was wondering if it would be possible to do using vh/vw etc. I just can't understand how I would center the text wrapper using vh, if the height of the text wrapper is fluid.

link to the fiddle: http://jsfiddle.net/s1fhae65/3/

The structure of my parent div:

<section id="zero">
  <div id="header">
    Header
  </div>
  <div id="text-wrapper">
    <h2>
      Title
    </h2>
    <h4>
      Subtitle
    </h4>
  </div>
</section>

CodePudding user response：

You can give position:absolute and margin-top: 50vh to text-wrapper div. In this way it will remain at center of its parent div. You can also use width:100vw to give full width to text-wrapper div.

CodePudding user response：

is this what you need?

#text-wrapper {
    vertical-align: middle;
    text-align: center;
}
#zero {
  height: 100vh;
}

#header {
  height: 3rem;
  background-color: blue;
}

#text-wrapper {
  /* how to center this if the height is fluid? */
  margin: 20vh;
  text-align: center;
  background-color: yellow;
  height:auto;
  vertical-align: middle;
}

<section id="zero">
  <div id="header">
    Header
  </div>
  <div id="text-wrapper">
    <h2>
      Title
    </h2>
    <h4>
      Subtitle
    </h4>
  </div>
</section>