我用过展示：flex;对齐项目：居中;对齐内容：center;在父对象上，使子对象水平和垂直居中，为了实现这一点，我们需要设置父对象的高度和宽度。

#background {
  height: 100vh;
  width: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

#content {
  z-index: 1;
}

#watermark-text {
  color: #eae9e9;
  font-weight: bold;
  font-size: 800px;
}

<div id="background">
  <p id="watermark-text">WaterMark</p>
</div>
<div id="content"> </div>

如果水印是指用文本覆盖屏幕的文本，那么只需将正文设置为位置即可：这意味着当我们用position: absolute和inset:0设置背景div时，水印相对于body元素定位，这使得背景div覆盖整个页面。
使用grid和place-items center把文本放在屏幕中央，我给背景上色，并在文本上设置opacity，这样你就可以看到它覆盖了内容。
注意：我已经用vw unit设置了字体大小为 windows 宽度的百分比，这样当你把屏幕变大时，水印的大小也会随之增加，你可以设置为一个像素值，或者更好的是，rem或em。
如果您希望水印不随屏幕滚动而移动，请更改位置：绝对位置：固定。
任何问题，只要弹出一个评论，我会回应。

body {
  position: relative;
  margin: 0;
}

#background {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #eae9e9;
  background-color: rgba(0, 192, 0, 0.5);
  opacity: 0.5;
  font-weight: bold;
  font-size: 15vw;
}

<div id="background">WaterMark</div>
<div id="content">
  <img src='https://picsum.photos/id/237/400/900'>
</div>

#background {
  position: fixed;
  background: white;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: -10;
}

#content {
  z-index: 10;
  width: 100vw;
  height: 100vh;
  color: black;
}

#watermark-text {
  color: #eae9e9;
  font-weight: bold;
  font-size: 800px;
}

<div id="background">
  <p id="watermark-text">WaterMark</p>
</div>
<div id="content">jlsgdfjlgdsfjodfgjoifdgjasfddddddddddds<br>joiasjoidsajoasfds </div>

这就是我要做的，它在编辑器中看起来很奇怪，但在页面上应该可以完美地工作，或者你可以只设置一个背景到div本身的内容是什么，要知道，这将是不安全的，因为任何人都可以改变HTML和CSS客户端无论如何。

.watermark {
    /* Used to position the watermark */
    position: relative;
}

.watermark__inner {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Absolute position */
    left: 0px;
    position: absolute;
    top: 0px;

    /* Take full size */
    height: 100%;
    width: 100%;
}

.watermark__body {
    /* Text color */
    color: rgba(0, 0, 0, 0.2);

    /* Text styles */
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;

    /* Rotate the text */
    transform: rotate(-45deg);

    /* Disable the selection */
    user-select: none;
}