页面高宽自适应屏幕，div上下左右居中

直接上源码 很容易看懂

<template>
  <div class="my-container" :style="{ 'height': bodyHeight + 'px', 'width': bodyWidth + 'px'}">
    <div class="center-box">
      <div class="center-content"></div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Mytest',
  data() {
    return {
      bodyHeight: 0,
      bodyWidth: 0,
    }
  },
  mounted() {
    this.initScreanSize()
  },
  methods: {
    initScreanSize() {
      this.bodyHeight = window.innerHeight
      this.bodyWidth = window.innerWidth
      // const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      // const clientWidth = document.documentElement.clientWidth || document.body.clientWidth
      // this.bodyHeight = clientHeight
      // this.bodyWidth = clientWidth
    }
  }
}
</script>

<style scoped>
  .my-container{
    background-color: #d8941d;
    /*background: url("~@/assets/img/happyelement_bg.png") no-repeat;background-size:cover;*/
  }
  .center-box{
    position: relative; /* 上下左右居中，结合center-content */
    background-color: #99ccff;
    border-radius: 15px;
    padding: 15px;
    width: 200px;
    min-height: 400px;
    margin: 0px auto; /* 左右居中 */
  }
  /* 上下左右居中， 父级属性需要设置 position: relative */
  .center-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 120px;
    height: 120px;
    background-color: #ff266e;
  }
</style>