[分享]css两个组件在一条竖直线上

在CSS中，有时需要在同一条竖直线上放置两个组件，可以使用以下代码进行实现：

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.component-1 {
  width: 50%;
  height: 100px;
  background-color: red;
}

.component-2 {
  width: 50%;
  height: 200px;
  background-color: blue;
} 

上述代码中，使用了flex布局，将两个组件放在容器中，并通过align-items和justify-content将它们竖直居中。

组件1和组件2具有相同的宽度，并放置在同一个容器中，上述代码中定义了它们的高度和背景颜色，但在实际应用中，可以根据需要进行修改。

通过上述代码，可以轻松地将两个组件放在同一个竖直线上，为网页设计提供更多的灵活性和可操作性。