Question

我使用100vh设置了一个全高度英雄单位以及一个固定位置标题。

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

我试图让跨度在first_section div中垂直居中，并考虑固定位置导航栏的高度。

我似乎无法实现它，任何人都可以帮忙吗？

Answer 1

试试这个

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

实现此目的的一种方法是使用flexbox。

只需添加：

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

Here是你的小提琴更新

请注意flexbox不是100％支持。有关哪些浏览器支持它的信息，您可以查看here。

Answer 3

这样做的另一个变体是：

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

确保将标题top:0;和英雄边距顶部修复为标题的高度。

我在此link

上使用此解决方案构建了相同的英雄

这是您解决的jfiddle

HTML全高度英雄使用100vh与居中的内容

3 个答案: