美文网首页
flex 布局水平垂直居中,内部区域高度超出外部区域高度时的bu

flex 布局水平垂直居中,内部区域高度超出外部区域高度时的bu

作者: 郝艳峰Vip | 来源:发表于2021-05-11 10:54 被阅读0次

前言


最近在项目中遇到一个问题就是水平垂直居中我是用的是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 布局水平垂直居中,内部区域高度超出外部区域高度时的bu

      本文链接:https://www.haomeiwen.com/subject/qiegdltx.html