How to make a form centered on a figure

Question

I have a figure and in its interior a form, the big problem is that when I resize the browser the figure is readjusted perfectly, however the form that is inside it comes out of the object.

The image below shows your is normal, with the browser maximized.

OBS: The figure displays the photo and the form is the black rectangle

When readjusting the browser the form leaves the centralized space of figure, as shown below.

I need the form be always centered in the middle of the figure.

HTML

<figure class="cx-fotos-portugal">
    <form>

    </form>
    <img src="./fotos-portugal/foto-portugal-capitania-do-porto-cascais.jpg">
</figure>

CSS

figure.cx-fotos-portugal img{
    width: 100%;
    height: 100%;
    max-height: 550px;
}

figure.cx-fotos-portugal form{
    position: absolute;
    width: 35.71428571428571%;
    height: 14.28571428571429%;
    max-height: 550px;
    background-color: #000;
    left: 35%;
    top: 30%;
}

Answer 1

Feel free to study Flexbox css Tricks

figure.cx-fotos-portugal{
    margin: 0 auto;
    width: 95%;
    height: 50vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

figure.cx-fotos-portugal form{
    position: relative;
    z-index: 100;
    width: 30%;
    height: 20%;
    background-color: black;
    margin: 0;
    padding: 0;
}

figure.cx-fotos-portugal img{
    top: 0;
    position: absolute;
    width: 100%;
    height: 50vw;
}

<figure class="cx-fotos-portugal">
    <form>

    </form>
     <img src="https://blog.emania.com.br/content/uploads/2015/12/Papel-de-Parede-de-Paisagem.jpg">
</figure>

Answer 2

This is because you are using top with %, to get this effect accurately use a fixed size in pixels and helping with media query for other resolutions.

Or you can also opine for putting a "background: cover", getting like this:

* { margin: 0; padding: 0; }
figure {
    width: 100%;
    min-height: 550px;
    height: auto;
    position: relative;
    background-image: url(imagem);
    background-size: cover;
}

figure form{
    position: absolute;
    width: 35%;
    height: 14%;
    background-color: #000;
    left: 35%;
    top: 30%;
}

Answer 3

Try adding these measurements to your CSS:

figure.cx-fotos-portugal form {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}