我们在通常情况下都需要进行垂直水平居中的一个样式处理，在垂直水平居中方面，这里给出了一种关于div及内部文本内容的一个垂直水平居中显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app" class="div1">
    {
  {name}}
  </div>
  <script> var vm = new Vue({
      el: '#app', data: {
      name:'chen', } }) </script>
  <style> .div1 {
      width: 200px; height: 200px; font-size: 30px; background-color: #228bec; /*内部文字垂直水平居中*/ text-align: center; line-height: 200px; /*div相对页面垂直水平居中*/ margin:auto; position: absolute; top:0; left:0; bottom: 0; right: 0; } </style>
</body>
</html>

效果如图所示：