justify-content垂直居中，缩小容器后顶部丢失的bug
这是一个小伙伴发来的demo
他说啊为什么浏览器缩小之后
上面那个1就没有了
即使用滚动条也滚不上去了
但是下边（的5）没问题
为什么会这样呢
因为啊他用了一个justify-content配合flex
做了这么一个垂直居中的效果
所以无论什么时候他都是垂直居中的
即便是浏览器的高度小于了内容高度
他也是垂直居中的
所以就会导致
会有上下两部分空间在屏幕外边
下边的没问题
但上面的那部分他就看不着了
为什么呢我们来看这个demo
这个是一个可以拖拽的容器
当把容器拖拽到屏幕下边的边缘
大家看他就会出现纵向滚动条
当我们把这个容器拖拽到右边
超出屏幕边缘呢
他就会出现横向滚动条
但是如果我把这容器拖拽到上面
他就没有滚动条
或者左边也是一样的
所以呢有些时候
我们就会把一些容器放置到
横/纵 坐标为负数的屏幕外边
这样的话呢就可以把它隐藏起来
然后呢再做一些动画
比如说这样向下滑出
那再回到刚才这个例子
这种情况怎么解决呢
最好的方法肯定是当它缩小的时候呢
就不要这个垂直居中了
大家看这个1就出来了
然后呢当它放大的时候呢
再把这垂直居中加上
但是呢这种效果（如果不用js）就依赖于媒体查询了
就是这个media
之前我提到过哈
那但是有个问题这种使用方法
在这里边啊需要设
置一个max-height
这个值是固定的
也就意味着
页面上这个数量和高度
都只能是固定的了
所以啊这个思路也不是特别好
我们可以换一种实现垂直居中的思路
我们不用这种方法了
我们利用margin:auto的方式来实现
垂直居中
但是呢这里边注意
它有很多个子元素
所以我们需要借助一下伪类
我们这样father
然后里边的first child
给它加一个margin🔝 auto
然后同理呢
再来一个last child
然后还是margin-bottom auto
大家看居中了
然后再缩小
大家看这样就没有问题了
最后更新于