0%

自适应垂直居中:不满一屏垂直居中,超过一屏滚动

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

需求

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

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

实现

使用 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,页面正常滚动。

梅旭光 wechat
欢迎扫码关注我的公众号