用css和中心文本叠加图像上的颜色

I am trying to make it so when users hover over an item that is no longer in stock it will show them a message overlay on the image saying no longer in stock. This is working currently but I cannot seem the get the text to float in the absolute center of the block. It floats on the top in the center of the image.

我试图这样做，当用户将鼠标悬停在不再有库存的商品上时，它会在图片上显示消息覆盖，表示不再有库存。这当前工作，但我似乎无法让文本浮动在块的绝对中心。它漂浮在图像中心的顶部。

Here's the HTML

这是HTML

<div class="store_no_stock_sizer">
        <img src="/com/img/products/1.png" alt="Image">
</div>
<div class="store_page_product_title">Test Item</div>
<p>Out of Stock</p>

and the CSS I am using to overlay the image

和我用来覆盖图像的CSS

.store_no_stock_sizer {
        display: inline-block;
        position: relative;
}
.store_no_stock_sizer:after {
        opacity: 0;
}
.store_no_stock_sizer:hover:after {
        max-width: 100%;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        outline: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 99%;
        display: block;
        position: absolute;
        background: #000;
        color: #FFF;
        opacity: 0.7;
        content: "OUT OF STOCK";
}

Now this DOES WORK but it has the text in the top of the image when they hover over it rather then in the center of the image. I would use padding and such but since its a responsive page and image, I don't want a strict padding set to it.

现在这可以工作但是当它们悬停在图像顶部而不是图像的中心时，它会在图像的顶部显示文本。我会使用填充等，但由于它是一个响应式页面和图像，我不想要一个严格的填充设置。

2 个解决方案

#1

You can use display: flex for dynamically centering text,

您可以使用display：flex来动态居中文本，

Also using align-items: center; and justify-content: center;

还使用align-items：center;并证明内容：中心;

Like this:

喜欢这个：

.store_no_stock_sizer:hover:after {
        max-width: 100%;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        outline: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 99%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        background: #000;
        color: #FFF;
        opacity: 0.7;
        content: "OUT OF STOCK";
}

#2

<p> tags are mostly used for articles and stuff if you need to show an error, you might wanna use <span> tag so It would be something like:

标签主要用于文章和东西，如果你需要显示错误，你可能想要使用标签，所以它会是这样的：

<span id="error">Your error goes here.</span>

css:

CSS：

#error{
    width:100%;
    text-align:center;
    // Or you could use an absolute position and manually set the top and left position of the tag
}

#1