[分享]css两个盒子垂直居中

CSS布局中，垂直居中是一个常见的需求。本文将为大家介绍两个盒子垂直居中的方法：

方法一：使用flexbox

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

以上代码将父元素.container设置为flex布局，同时将子元素垂直和水平方向居中。

方法二：使用transform

.container{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

以上代码将子元素的position属性设为absolute，并将top和left属性设为50%。然后使用transform属性将子元素向左上方移动自身宽高的一半。这样就实现了垂直和水平方向的居中。

以上两种方法都可以实现垂直居中，但是使用flexbox布局更加简便和易于理解，特别是在响应式布局中更为方便。而使用transform方法则可以在不知道父元素高度时使用。