0

I have the following code:

  .immune-box{
    text-align: center;
    padding-bottom: 20px;

  }
.immuneText{
    font-size: 24px;
    font-weight: 600;
    color: #636967;
  }
  .immune-splitter{
    width: 75%;
    border-top: 1px solid #003B5A;
    margin-left: auto;
    color: #636967;
    margin-right: auto;
  }
  .immune-active-text{
    font-size: 18px;
    font-weight: 400;
    color: #636967;
  }
  .watermark{
    position: absolute;
    left: 50%;
    right: 50%;
    opacity: 0.3;
  }
<div class="immune-box">
<svg class="watermark" version="1.1" class in background xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="215" height="156" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
   xml:space="preserve" class="logo">
<path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
  c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
  c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
  c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
  c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
  c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
  c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
  c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
  c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
  c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
  c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
  c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
  c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
  c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
  z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
  C434.693,207.929,439.613,203.01,445.731,203.01z"/>
  </svg>
    <h5 class="immuneText">Hell world Header text</h5>
    <hr class="immune-splitter" style="margin-bottom: 10px"/>
    <p class="immune-active-text">Some other text:</p>
    <h5 class="immuneText" style="padding-bottom: 15px">Some date text</h5>
    <hr class="immune-splitter"/>
    <h5 class="immuneText">Some very long text where i dont know what to say.</h5>
</div>

Here I attempt to create a watermark but I can't seem to get the picture to be in the center. I've tried to move around with the left and right; however when I do so, the mobile view of this page won't work since the scales are off.

So how do I center the image responsively?

halfer
  • 18,701
  • 13
  • 79
  • 158
Marc Rasmussen
  • 17,383
  • 66
  • 172
  • 305
  • Hey Marc! Just added my solution. You were super close as it is. You just need to add `transform: translateX(-50%);` to offset the svg's width. If you want to center the svg vertically as well, remove the `right` property and add `top: 50%; transform: translate(-50%,-50%);` in addition to the `left: 50%;` you already have in place. **Also, be sure to only use ^one of these transform properties, not both. – Brandon McConnell Apr 16 '21 at 07:52

2 Answers2

1

Just add the top attribute for vertical centering (if you want it) and then be sure to add the transform property to offset the svg's actual width by -50%:

.watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  opacity: 0.3;
}

Here it is in action:

.immune-box {
  text-align: center;
  padding-bottom: 20px;
}
.immuneText {
  font-size: 24px;
  font-weight: 600;
  color: #636967;
}
.immune-splitter {
  width: 75%;
  border-top: 1px solid #003B5A;
  margin-left: auto;
  color: #636967;
  margin-right: auto;
}
.immune-active-text {
  font-size: 18px;
  font-weight: 400;
  color: #636967;
}
.watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  opacity: 0.3;
}
<div class="immune-box">
<svg class="watermark" version="1.1" class in background xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="215" height="156" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
   xml:space="preserve" class="logo">
<path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
  c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
  c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
  c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
  c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
  c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
  c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
  c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
  c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
  c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
  c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
  c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
  c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
  c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
  z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
  C434.693,207.929,439.613,203.01,445.731,203.01z"/>
  </svg>
    <h5 class="immuneText">Hell world Header text</h5>
    <hr class="immune-splitter" style="margin-bottom: 10px"/>
    <p class="immune-active-text">Some other text:</p>
    <h5 class="immuneText" style="padding-bottom: 15px">Some date text</h5>
    <hr class="immune-splitter"/>
    <h5 class="immuneText">Some very long text where i dont know what to say.</h5>
</div>
Brandon McConnell
  • 2,764
  • 1
  • 10
  • 18
  • Thanks @MarcRasmussen! Also, if you'd like the watermark to always be centered in the background even as the user scrolls, just change its `position` property value from `absolute` to `fixed` – Brandon McConnell Apr 16 '21 at 08:24
1

check below code

.immune-box{
    text-align: center;
    padding-bottom: 20px;

  }
.immuneText{
    font-size: 24px;
    font-weight: 600;
    color: #636967;
  }
  .immune-splitter{
    width: 75%;
    border-top: 1px solid #003B5A;
    margin-left: auto;
    color: #636967;
    margin-right: auto;
  }
  .immune-active-text{
    font-size: 18px;
    font-weight: 400;
    color: #636967;
  }
  .watermark{
        position: absolute;
    opacity: 0.3;
    left: 0;
    right: 0;
    margin: auto;
  }
<div class="immune-box">
<svg class="watermark" version="1.1" class in background xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="215" height="156" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
   xml:space="preserve" class="logo">
<path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
  c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
  c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
  c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
  c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
  c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
  c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
  c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
  c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
  c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
  c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
  c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
  c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
  c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
  z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
  C434.693,207.929,439.613,203.01,445.731,203.01z"/>
  </svg>
    <h5 class="immuneText">Hell world Header text</h5>
    <hr class="immune-splitter" style="margin-bottom: 10px"/>
    <p class="immune-active-text">Some other text:</p>
    <h5 class="immuneText" style="padding-bottom: 15px">Some date text</h5>
    <hr class="immune-splitter"/>
    <h5 class="immuneText">Some very long text where i dont know what to say.</h5>
</div>
Ammad Amir
  • 380
  • 2
  • 5