[分享]css两个垂直排列

CSS是前端开发的重要技术之一，其中垂直排列也是常见的布局需求之一。下面将介绍两种实现垂直排列的CSS方法：方法一：使用flexbox.container { display: flex; flexd...

CSS是前端开发的重要技术之一，其中垂直排列也是常见的布局需求之一。下面将介绍两种实现垂直排列的CSS方法：

方法一：使用flexbox

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
} 

以上代码中，将容器的display属性设置为flex，flex-direction属性设置为column，即使子元素垂直排列。同时，justify-content属性设置为center，即让子元素垂直居中。

方法二：使用position和transform

.container {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

以上代码中，将容器的position属性设置为relative，将子元素的position属性设置为absolute，同时通过top属性使其距离父元素顶部50%的位置（即垂直居中）。但是此时子元素的中心点并不在垂直中央，因此需要使用transform属性，将子元素向上移动自身高度的一半，即可实现垂直排列。

以上是两种常用的CSS垂直排列方法，根据实际情况选择适合自己的方法。