使用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')
  }

这样就可以给动态组件加上样式啦。