make div center with water mark css-CodePudding

I want to put watermark-text at the center of page. but it's not work it always go to the left of page. I try to use top and left with the #background element but the font-size of #watermark-text get smaller how can I put #watermark-text in the center without change the font-size.

#background {
  position: absolute;
  background: white;
  z-index: 0;
}

#content {
  z-index: 1;
}

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

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

CodePudding user response：

I've used display: flex; align-items: center; justify-content: center; on the parent to center the child horizontally and vertically and in order to achieve that we need to set a height and a width to the parent.

#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>

CodePudding user response：

If by watermark you mean text that overlays the screen with text then you can do it very simply by setting the body to position: relative. This means that when we set the background div with position: absolute and inset:0, the watermark is positioned relative to the body element. This makes the background div cover the whole page.

Use grid and place-items center to put the text in the center of the screen. I've coloured the background and set opacity on the text so you can see that it's overlaid the content.

Note: I've set the font size a percentage of the viewport width using the vw unit so as you make the screen bigger, the watermark increases in size to suit. You can set this to a pixel value or, even better, rem or em.

If you want the watermark not to move with the screen scroll, change position: absolute to position: fixed.

Any questions, just pop a comment in and I'll respond.

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>

CodePudding user response：

#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>

This is how I would do it looks strange in the editor but should work perfectly on the page, alternative you can just set a background to the div itself where to content is, be aware that this won't be secure as anyone can just change the HTML and CSS clientside anyway.

CodePudding user response：

.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;
}