卡片居中展示 vue

在 Vue 中，将卡片居中展示通常可以通过 CSS 和组件样式来实现。以下是一个简单的步骤和示例代码：

1. **CSS 居中**：
使用 Flexbox 或 Grid 可以方便地实现卡片的水平和垂直居中。例如，在 `.card-container` 类中设置为 `display: flex; justify-content: center; align-items: center;`。

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 适应视口高度 */
}
.card {
  /* 添加必要的样式，如宽度、背景色等 */
}

2. **Vue 组件**：
在 Vue 组件中，创建一个名为 Card 的组件，并添加 CSS 类名。在模板部分，你可以直接绑定父元素的样式。

<template>
  <div class="card-container">
    <div class="card" v-bind:class="{ 'centered': isCentered }">
      <!-- 卡片内容 -->
      <div>{{ content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCentered: true, // 初始状态为居中
      content: '这是卡片内容',
    };
  },
  // ...其他组件方法
};
</script>

如果你想在组件内动态控制卡片是否居中，可以在 `isCentered` 数据属性上添加方法，比如点击按钮切换。

<button @click="toggleCentered">切换卡片位置</button>

methods: {
  toggleCentered() {
    this.isCentered = !this.isCentered;
  },
}