vue 垂直居中

作者：看破了搪塞发布日期:2025-10-10 浏览:69

<!DOCTYPE html>
<html>
<head>
  <title>Vue 垂直居中示例</title>
  <style>
    /* 使用 Flexbox 实现垂直居中 */
    .container {
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center;     /* 垂直居中 */
      height: 100vh;           /* 容器高度为视口高度 */
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div>
        <p>{{ message }}</p>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: '这是垂直居中的文本'
      }
    });
  </script>
</body>
</html>

解释说明：

HTML结构:
- #app 是 Vue 实例的挂载点。
- .container 是一个使用 Flexbox 布局的容器，用于实现内容的水平和垂直居中。
CSS样式:
- .container 使用了 display: flex 来启用 Flexbox 布局。
- justify-content: center 使子元素在水平方向上居中。
- align-items: center 使子元素在垂直方向上居中。
- height: 100vh 设置容器的高度为视口高度，确保整个页面都能应用垂直居中效果。
Vue实例:
- 创建了一个简单的 Vue 实例，并绑定了一个 message 数据属性，显示在页面中央。

上一篇：vue点击子元素不触发父元素

下一篇：vue withdefaults