[分享]css不知道高度垂直居中

许多人在使用CSS时，常常会遇到一个问题：如何将一个元素垂直居中，特别是当不知道元素高度的情况下。/ 方法一 / .parent { display: flex; alignitems: center...

许多人在使用CSS时，常常会遇到一个问题：如何将一个元素垂直居中，特别是当不知道元素高度的情况下。

/* 方法一 */
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 方法二 */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

第一种方法是使用Flexbox，将父元素设置为Flex容器，然后使用align-items和justify-content属性将子元素垂直和水平居中。这种方法非常方便，但是现在还不是所有浏览器都支持Flexbox。

第二种方法是通过相对定位和绝对定位来实现。首先将父元素设置为相对定位，然后将子元素设置为绝对定位，并通过top:50%让它向下偏移，但是此时子元素的中心点并不在父元素的中心点，所以要使用transform:translateY(-50%)将其向上移动50%的高度，从而实现垂直居中。

以上两种方法都是比较常用的，但是除了这两种方法，还有其他方法可以做到不知道高度的垂直居中。例如，在父元素中使用display: table-cell和vertical-align: middle属性，或者使用CSS Grid布局中的align-items:center和justify-items:center属性。