项目场景：

vue项目界面在浏览器缩小时，自动居中显示。

解决方案：

通常情况下，浏览器缩小界面会自动左上角居中，想让页面在中间显示。

在vue项目中，需要用到watch一直监听屏幕的缩放比。代码如下：

data() {
    return {
      // 缩放比
      screenRatio: Math.round((window.outerWidth / window.innerWidth) * 100),
    };
  },
  watch: {
    screenRatio: {
      immediate: true, // 开启一直监听
      handler: function(val) { // val是获取到的缩放比
        if (val < 125) { // 不同缩放比下进行不同的操作
          document.querySelector("#content").classList.add("small");
        } else {
          document.querySelector("#content").classList.remove("small");
        }
      },
    },
  },
  mounted() {
    window.onresize = () => { // 不使用window.onresize只能监听一次，使用可以一直监听
      return (() => {
        window.screenRatio = Math.round( (window.outerWidth / window.innerWidth) * 100 );
        this.screenRatio = window.screenRatio;
      })();
    };
  },

以下是样式，实现让界面居中显示，但是放大后部分内容不显示，所以需要watch监听缩放比，放大的时候，去掉这个类名。

.small {
  // 居中但没有滚动条
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content {
  display: flex; // 全屏垂直居中
  flex-direction: column; // 全屏垂直居中
  justify-content: center; // 全屏垂直居中
  width: 96rem; // 全屏时铺满16:9
  height: 54rem;
}

给最外层div加这个类名。

<template>
	<div id="content" class="small content">这里放主体内容</div>
</template>