弹窗居中

实现效果：内容可变弹窗，视窗居中展示，在视窗空间不够时（比如横屏），局部滚动。

方案：居中对齐使用 flex 布局方式；局部滚动使用 flex-direction: column，及 margin: auto。

弹窗 HTML 层级结构

<div class="popup_mask layout_center">
  <div class="popup_wrap">
    <div class="popup_c">xy</div>
  </div>
</div>

居中及局部滚动样式

.layout_center { display: flex; align-items: center; flex-direction: column; overflow: scroll; }
.layout_center > div { margin: auto; }