vue 2个div布局垂直居间

你可以使用flex布局来实现两个div垂直居中。具体做法如下：

HTML代码：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS代码：

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 父容器高度设置为视口高度 */
}

.child {
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

解释：通过`display: flex`将父容器设置为flex布局，然后设置`flex-direction`为`column`，表示子元素将以列的方向排列。通过`justify-content`和`align-items`将子元素垂直居中。最后设置父容器的高度为视口高度，这样就能保证在任何分辨率下都能居中显示。

相关问题

使用vue3和js使用flex布局实现div中的两个div按照两个居中展示

在Vue 3中使用Flexbox布局实现两个div元素水平居中对齐，你可以创建一个简单的Vue组件并设置容器的display属性为`flex`，然后利用`justify-content`属性将内容居中对齐。这里是一个基本的例子：

<template>
  <div class="container">
    <div class="item item-1">Item 1</div>
    <div class="item item-2">Item 2</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
}
</script>

<style scoped>
.container {
  display: flex; /* 设置主轴为flex */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中，默认已包含在flex布局中 */
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  margin: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
</style>

在这个例子中，`.item`类用于定义两个子div的内容样式，`.container`则负责设置整个布局的flex属性。通过这样的方式，无论`item-1`和`item-2`的尺寸如何变化，它们都会相对于`.container`居中显示。

vue中的内容怎么垂直排列

在Vue中，可以使用CSS样式来垂直排列内容。常见的方法有：

1. 使用flex布局，将容器设置为display:flex，并设置align-items:center属性，即可实现垂直居中：

<div class="container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
</div>

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.item {
  margin: 10px;
}

2. 使用table布局，将父元素设置为display:table，子元素设置为display:table-cell，并设置vertical-align:middle属性，即可实现垂直居中：

<div class="container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
</div>

.container {
  display: table;
  height: 200px;
}

.item {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

以上两种方法可以实现垂直排列内容，具体方法视情况而定。