关于前端:使用flex的垂直居中对齐溢出隐藏以后造成顶部滚动一部分区域无法显示的解决办法

先画出一个用于测试的页面
html

<div class="container">  <div class="head">    <span>这是头部</span>  </div>  <div class="body">    <div class="body-container">      <div class="text">这是身材，宽高500px</div>    </div>  </div></div>

less

.container{    position: relative;    height: 100%;    .head{        border: 1px solid red;    }    .body{        border: 1px solid green;        height: calc(100% - 24px);        display: flex;        justify-content: center;        align-items: center;        overflow: auto;        .body-container{            border:1px solid blue;            width: 500px;            height: 500px;            .text{                background-color: #d9d7d7;            }        }    }}

画进去的页面大略是这样的,疏忽antd UI库主动带来的其余页面款式

能够看到页面是主动依照浏览器的窗口大小调整大小，并且核心的蓝色框框区域是永远在容器中程度垂直居中的

然而随之而来的一个问题就是，蓝色框框区域内的顶部也就是灰色底色的局部，在页面高度不够的时候会被溢出暗藏，然而就算滚动到顶部当前也没方法显示进去，这是flex带来的一个bug

解决办法就是在应用flex的容器外部的元素加上margin:auto这条款式就能够解决

另，如果是动静组件生成的组件，无奈间接给对应容器加上款式，能够在动静组件中拿到对应的组件对象，而后利用Renderer2的setStyle()办法给加上对应的款式，代码如下

 loadComponent() {    const adItem = this.ads[this.currentAdIndex];    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);    const viewContainerRef = this.adHost.viewContainerRef;    viewContainerRef.clear();    const componentRef = viewContainerRef.createComponent(componentFactory);    (<AdComponent>componentRef.instance).data = adItem.data;    //只须要看上面这一行代码 renderer就是Renderer2    this.renderer.setStyle(componentRef.location.nativement,'margin','auto')  }

这样就能够给动静组件加上款式啦。