关于前端:使用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')
  }

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