[分享]css两个元素垂直居中

在CSS中，实现两个元素垂直居中是一项经常需要解决的任务。这些元素可能是文本、图像或其他内容。下面是两种实现垂直居中的方法。第一种方法：使用Flexbox.parent { display: flex...

在CSS中，实现两个元素垂直居中是一项经常需要解决的任务。这些元素可能是文本、图像或其他内容。下面是两种实现垂直居中的方法。

第一种方法：使用Flexbox

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

.child {
  /* add styles for child element */
} 

使用Flexbox，我们可以通过设置父元素为flex容器并使用两个属性来实现垂直居中：align-items和justify-content。这两个属性使子元素在水平和垂直方向上都居中。这是一种简单而优雅的方式，但可能不适用于所有的场景。

第二种方法：使用绝对定位

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* add more styles for child element */
} 

使用绝对定位，我们可以将父元素设置为相对定位，并将子元素设置为绝对定位。然后，我们可以通过设置子元素的顶部为50%，并使用TranslateY()函数来移动它的位置，使其居中。但是，该方法要求父元素具有已知的高度，这可能不适用于所有的情况。

结束语：以上是两种基本的方法来实现两个元素垂直居中。在实际使用中，我们需要根据实际情况来选择适合的方法。如果您知道其他的方法，欢迎在评论中分享。