vue中垂直排列的两个div

可以使用Flex布局实现垂直排列的两个div。具体做法如下：

HTML代码：

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box1 {
  background-color: #f0f0f0;
  width: 200px;
  height: 100px;
  margin-bottom: 20px;
}

.box2 {
  background-color: #d0d0d0;
  width: 200px;
  height: 100px;
}

其中，`display: flex`表示使用Flex布局，`flex-direction: column`表示主轴方向为纵向，`justify-content: center`表示在主轴方向上居中对齐，`align-items: center`表示在交叉轴方向上居中对齐。`height: 100vh`表示容器高度为视口高度。`margin-bottom: 20px`表示第一个盒子与第二个盒子之间有20px的间距。

相关问题

vue中让两个div标签上下显示

在Vue中，也可以使用flexbox布局来实现两个div上下排列。代码如下：

HTML代码：

<template>
  <div class="container">
    <div class="box1">上面的div</div>
    <div class="box2">下面的div</div>
  </div>
</template>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
}

.box1 {
  background-color: #FFC0CB;
  height: 100px;
}

.box2 {
  background-color: #ADD8E6;
  height: 200px;
}

以上代码与前面的纯HTML/CSS代码基本一致，只是放在了Vue的`<template>`中。在Vue中使用CSS样式的方式与纯HTML/CSS基本相同，只需要将样式放在Vue组件的`<style>`标签中即可。

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;
}

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