position: fixed;如何垂直水平居中

要将一个具有 `position: fixed;` 属性的元素垂直水平居中，可以使用以下方法：

1. 使用 `top`, `left`, `bottom`, `right` 和 `transform` 属性的组合：

.element {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这将使元素的左上角位于页面的中心位置。`top: 50%;` 和 `left: 50%;` 将元素的顶部和左侧边缘定位到页面的50%处。然后，`transform: translate(-50%, -50%);` 将元素向左和向上移动自身宽度和高度的50%，从而使其在页面中垂直水平居中。

2. 使用 Flexbox：

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.element {
  position: fixed;
}

这将使用 Flexbox 将 `body` 元素的内容垂直水平居中。`display: flex;` 将 `body` 设置为一个 Flex 容器。`align-items: center;` 和 `justify-content: center;` 分别将内容在垂直和水平方向上居中对齐。`height: 100vh;` 确保 `body` 的高度占满整个视口。

这些方法可以根据你的具体需求来选择使用哪一种。希望对你有所帮助！