工作中经常要用到的水平垂直居中实现

业务场景1、弹窗遮罩的水平垂直居中

实现方法1>让弹窗外层固定定位，width、height设置为100%，再让弹窗绝对定位，接着让元素平移或者用margin:auto实现垂直居中，代码类似如下：.warpper{position:fix;width:100%；height:100%;top:0;left:0;}.dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}或者.dialog{position:absolute;top:0;left:0;bottom:0;rigth:0;margin:auto},当然首选还是前一种，因为少了一行代码哈哈哈哈哈。（当弹框的高度需要随着内容自适应的时候，不适合使用这种方法，因为这时候如果没有写高度，高度就会是跟父元素一样）

实现方法2>让弹窗外层固定定位，并设置为弹性盒子然后设置justifu-content、align-items属性，类似代码如下：.wrapper{position:fixed;width:100%;height:100%;top:0;left:0;display:flex;justify-content:center;align-items;center;}，或者.wrapper{position:fixed;width:100%;height:100%;top:0;left:0;display:flex;};.dialog{margin:auto}不过这种方法好像还没有在实际中应用过，下次一定要尝试一下