CSS高度百分比垂直居中方法

在CSS中，我們可以使用百分比來設(shè)置元素的高度，并且可以通過一些技巧來實現(xiàn)垂直居中，下面是一些實現(xiàn)垂直居中的方法：

1、使用flexbox布局

Flexbox是一種非常靈活的布局方式，可以輕松地實現(xiàn)垂直居中，我們可以將元素設(shè)置為flex容器，并使用align-items屬性來設(shè)置垂直對齊方式。

.container {
  display: flex;
  align-items: center;
  height: 100vh; /* 設(shè)置容器高度為視口高度 */
}

2、使用position屬性

我們可以將元素設(shè)置為相對定位（relative），并使用top和bottom屬性來設(shè)置垂直位置。

.container {
  position: relative;
  height: 100vh; /* 設(shè)置容器高度為視口高度 */
}
.content {
  position: absolute;
  top: 50%; /* 將內(nèi)容元素向上移動容器高度的50% */
  transform: translateY(-50%); /* 將內(nèi)容元素向上移動自身高度的50% */
}

3、使用CSS Grid布局

CSS Grid布局也是一種非常靈活的布局方式，可以實現(xiàn)垂直居中，我們可以將元素設(shè)置為grid容器，并使用align-content屬性來設(shè)置垂直對齊方式。

.container {
  display: grid;
  align-content: center;
  height: 100vh; /* 設(shè)置容器高度為視口高度 */
}

這些方法都可以幫助我們實現(xiàn)CSS高度百分比垂直居中，我們可以根據(jù)自己的需求和布局方式選擇***適合的方法。