flex 布局水平垂直居中,内部区域高度超出外部区域高度时的bug
Posted 郝峰Vip
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex 布局水平垂直居中,内部区域高度超出外部区域高度时的bug相关的知识,希望对你有一定的参考价值。
前言
最近在项目中遇到一个问题就是水平垂直居中我是用的是flex
布局,然后在缩小屏幕时里边的内容高度超出了外侧区域的高度(这里是屏幕的高度,这时候虽然出现了滚动条,但是展示不完全,被遮住了,经过测验才发现是因为align-items:center;
)的原因,也就是居中的原因,解决办法写在下面。
<div class="coupon_window">
<div class="white_dialog">
</div>
</div>
.coupon_window {
width: 100%;
height: 100%;
z-index: 9999;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
.white_dialog {
margin: auto;
width: 542px;
border-radius: 8px;
}
}
解决办法就是在内部区域加
margin:auto;
这样就是可以实现即使居中也可以上下滚动看到全部内容。其他的居中方式也是这么解决。
以上是关于flex 布局水平垂直居中,内部区域高度超出外部区域高度时的bug的主要内容,如果未能解决你的问题,请参考以下文章
使锚标记填充父 flex 元素的 100% 高度和宽度,同时垂直和水平居中