自适应垂直居中：不满一屏垂直居中，超过一屏滚动

发表于 分类于 阅读次数：

垂直居中与全屏滚动不可得兼？有更好的方法。

需求

在内容不多，不够一屏的时候，垂直居中在屏幕正中。

当内容足够多，超过一屏时，像正常网页一样滚动浏览。

实现

使用 js 计算过于复杂了，想到了一个使用 css 解决这个问题的方式。

使用 flex 进行布局，但是要注意的是不能直接使用：

1
2
flex-direction: column
justify-content: center

进行垂直居中，这种方式在内容过多时，不能够完全撑起外层容器，造成内容顶部和底部显示不完整。

那么如何进行垂直居中？答案是利用伪元素：

1
2
3
4
5
6
7
8
9
10
.wrapper {
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
}
.content:before, .content:after {
    content: '';
    display: block;
    flex: 1;
}

利用伪元素来填充顶部和底部，来实现垂直居中对齐。

此时页面的内容其实是从上到下来进行排列的，当内容变多时，伪元素填充会自动被压缩变为0，页面正常滚动。