[分享]css3可视高度居中

CSS3中提供了一种让元素垂直居中的新方式，叫做可视高度居中。传统的垂直居中方式需要知道元素的高度，但可视高度居中不需要这样。它可以让元素在任何设备上都垂直居中，包括移动设备和桌面设备。.elemen...

CSS3中提供了一种让元素垂直居中的新方式，叫做可视高度居中。

传统的垂直居中方式需要知道元素的高度，但可视高度居中不需要这样。它可以让元素在任何设备上都垂直居中，包括移动设备和桌面设备。

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
} 

如上所示，我们需要将元素的位置设为相对定位，然后将top属性设置为50%。这会将元素的顶部边界移动到父元素的中心线上。

接下来，我们使用CSS3的transform属性，并将其设置为translateY(-50%)。这将把元素从顶部边界移到垂直中心线上。

最后，我们得到了一个在任何设备上都能垂直居中的元素。