在web中垂直布局有哪几种 分别举例展示

在web中，常见的垂直布局有以下几种：

1. 块级元素布局：使用 display: block; 把元素变成块级元素，然后使用 margin 或者 padding 实现垂直布局。例如：

<div class="box">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.box {
  display: block;
  height: 300px;
  background-color: #f2f2f2;
}

.item {
  display: block;
  height: 100px;
  margin-top: 20px;
  background-color: #ccc;
}

2. 表格布局：使用 display: table; 和 display: table-cell; 实现表格布局，可以使元素垂直居中。例如：

<div class="box">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.box {
  display: table;
  height: 300px;
  background-color: #f2f2f2;
}

.item {
  display: table-cell;
  vertical-align: middle;
  background-color: #ccc;
}

3. Flex布局：使用 display: flex; 实现弹性布局，可以使元素垂直居中。例如：

<div class="box">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f2f2f2;
}

.item {
  background-color: #ccc;
}

以上是三种常见的垂直布局方式。当然，还有其他的方式，如使用绝对定位等。