水平居中固定 div - CSS

想要让一个 div（或任何其他 HTML 元素）水平居中并且固定在页面上，可以用以下 CSS 样式：

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

这个样式的原理很简单：首先将 div 元素的位置固定在页面上（即不随页面滚动而移动），然后用 top 和 left 将其位置设置在页面的中心点（50%）。最后，通过 transform 属性的 translate() 方法，将 div 元素向左和向上移动自身宽度和高度的一半，从而确保水平居中。

如果你想让 div 在一个容器中水平居中而不是整个页面，只需要将 position 属性的值改为 relative 并且将 top 和 left 属性的值改为 0，再将容器的宽度和高度设置为 100%，就可以实现相同的效果：

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

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

以上代码片段返回的 markdown 如下：

# 水平居中固定 div - CSS

想要让一个 `div`（或任何其他 HTML 元素）水平居中并且固定在页面上，可以用以下 CSS 样式：

```css
div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

这个样式的原理很简单：首先将 `div` 元素的位置固定在页面上（即不随页面滚动而移动），然后用 `top` 和 `left` 将其位置设置在页面的中心点（50%）。最后，通过 `transform` 属性的 `translate()` 方法，将 `div` 元素向左和向上移动自身宽度和高度的一半，从而确保水平居中。

如果你想让 `div` 在一个容器中水平居中而不是整个页面，只需要将 `position` 属性的值改为 `relative` 并且将 `top` 和 `left` 属性的值改为 `0`，再将容器的宽度和高度设置为 `100%`，就可以实现相同的效果：

```css
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

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