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 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`将子元素垂直居中。最后设置父容器的高度为视口高度，这样就能保证在任何分辨率下都能居中显示。

vue搭建两个边框居中展示

要搭建两个边框居中展示的布局，我们可以使用Vue的flex布局来实现。具体步骤如下：

1. 在Vue组件的template标签内，添加一个父容器div，并给它设置display为flex，justify-content为center，align-items为center，来让子元素水平垂直居中显示。

2. 在父容器div内部再添加两个子容器div，分别代表两个边框。

3. 对于子容器div，可以设置宽度、高度、边框样式等样式属性，来呈现出边框的效果。

4. 最后，将子容器div写在父容器div内部，两个子容器div会自动排列在中央位置。

最终的代码如下：

<template>
  <div class="container">
    <div class="box" style="border: 1px solid black;">
      <!-- 第一个边框内容 -->
    </div>
    <div class="box" style="border: 1px dashed blue;">
      <!-- 第二个边框内容 -->
    </div>
  </div>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  /* 设置相关样式，如宽度、高度、边框样式等 */
  width: 200px;
  height: 150px;
  margin: 10px;
}
</style>

以上就是使用Vue搭建两个边框居中展示的方法。在实际开发中，可以根据具体需求进行样式的调整和优化。