使用 100vh 并具有居中内容的 HTML 全高英雄

Question

I have a full height hero unit set using 100vh along with a fixed position header.

<div class="header">
  This is a fixed position header
</div>

<div class="first_section_container">
    <div class="first_section">
        <div class="first_section_content">
            <span>
                This is some test content that I would like to be vertically centered, the fixed position header is causing me some problems
              </span>
          </div>
    </div>
</div>

https://jsfiddle.net/dfn1m4kk/

I am trying to get the span to be vertically centered in the first_section div and to take into account the height of the fixed position navigation bar.

Answer 1

Try this

 html, body{ width:100%; height:100%; margin:0; padding:0; } .header{ background:green; height:50px; width:100%; position:fixed; text-align:center; color:white; top: 0; } .first_section_container{ height:100%; } .first_section{ height: calc(100vh - 50px); background:#58585a; margin-top: 50px; } .first_section_content{ height:100%; display: table; margin: 0 auto; } .first_section_content span{ display: table-cell; width:400px; vertical-align: middle; text-align: center; }

 <div class="header"> This is a fixed position header </div> <div class="first_section_container"> <div class="first_section"> <div class="first_section_content"> <span> This is some test content that I would like to be vertically centered, the fixed position header is causing me some problems </span> </div> </div> </div> <div class="second_section"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nisl dui, gravida sed nisi id, sollicitudin placerat sapien. Nulla facilisi. Praesent sodales lorem quis est pulvinar, at consectetur ipsum tempus. Sed a lacus bibendum, ultrices odio non, fermentum nisl. Proin erat leo, venenatis in velit sed, molestie luctus nunc. Suspendisse quis aliquet odio. Etiam commodo nec neque quis viverra. Etiam nec justo ipsum. Morbi condimentum ipsum feugiat tincidunt semper. </p> <p> Ut vestibulum nulla dapibus vestibulum efficitur. Fusce vel augue ac est iaculis elementum vel et risus. Fusce imperdiet lacus eget lorem sodales consequat. Morbi porta risus sit amet massa auctor, vel rutrum augue porta. Quisque interdum est at ex placerat iaculis id sit amet felis. Maecenas accumsan turpis mattis nisi porttitor aliquet. Suspendisse suscipit magna vitae aliquet placerat. Nullam a facilisis mauris. Praesent ut orci vehicula, aliquet arcu eu, tempor arcu. Maecenas congue dui nisl, quis ultrices arcu aliquam ut. Pellentesque quis tincidunt mi. Duis rhoncus felis at mauris vestibulum malesuada. </p> <p> Nam in porttitor metus. In tristique, leo vitae facilisis facilisis, eros felis ornare neque, nec mollis velit sapien sit amet mauris. Fusce iaculis purus orci, id vehicula nisi facilisis in. Aliquam id nunc ac nisi feugiat cursus. Aliquam id orci at risus malesuada laoreet feugiat et mi. Integer laoreet lobortis nibh gravida euismod. Nulla facilisi. </p> <p> Phasellus maximus lacus quis ipsum tincidunt, ac dapibus turpis dignissim. Nunc sed odio ut arcu venenatis pharetra. Sed vel justo magna. Cras sagittis rutrum dapibus. Mauris quis dictum arcu, eu finibus felis. Nam dictum nibh gravida, mattis massa ac, varius urna. Vestibulum sodales ornare justo. Proin ac scelerisque odio, at euismod arcu. Quisque suscipit rhoncus porttitor. </p> <p> Donec mattis vestibulum lorem a pellentesque. Duis ut iaculis enim, a hendrerit felis. Proin finibus, leo non ornare elementum, nibh velit malesuada elit, eget pellentesque mauris nisl eu dolor. Morbi quis lobortis nisi. Proin convallis ipsum sed gravida dapibus. Aliquam fringilla ipsum vitae varius ornare. Pellentesque neque libero, congue ac lorem eget, faucibus fringilla risus. Integer semper, elit et posuere sagittis, est ante rutrum ligula, sed ornare magna ipsum et nibh. </p> </div>

Answer 2

One way to achieve this is to use flexbox .

Simply add:

.first_section_content{
    height:100%;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

Here is your fiddle updated

Be mindful that flexbox isn't 100% supported. For information on which browsers do support it, you may look here .

Answer 3

Another yet variant of doing this is by:

.first_section_content span{
    text-align:center;
    width:400px; 
    position:relative; 
    top:45%;
}

Make sure you fix the header top:0; and Hero margin-top to height of the header too.

I built the same hero using this solution on this link

Here is your solved jfiddle