CSS: Span partially submits to css applied to it

Question

I am trying to get a message about the successful appearance in the center of my website. What I tried applies to the entire website, with the exception of a sector called "recognized products."

When you add something to your wishlist, the message seems to be “next” to the product, and is not in the middle of the screen and fixed.

I am attaching a screenshot for the details.

CSS code

.flag-message {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    line-height: normal;
    text-align: center;
    font-size: 17px;
    width: 400px;
    vertical-align: middle;
    /* height: 170px; */
    background-color: rgba(68, 68, 68, 0.72);
    color: #ffffff;
    box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.38);
    padding: 25px;
    border-radius: 5px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.13);
    font-family: 'Calibri', sans-serif;
    /* font-weight: 700; */
    z-index: 9999949;
}

Answer 1

Do you think that your "product" may have a position: relative, so your top: 50% and left: 50%, should be relative to your product, and not your wrapper / site?