Center a div with text and position Absolute in the center of div pai

Question

People is the following I have a father div and another div with a text in position Absolute... this text is aligned to the top and left of the father div and I need to align to the center... things like top: x% or left x% .. They work because the parent element is dynamic and responsive ...I need it to stay right in the center. I tried things like Justify content and align items in the center but it didn’t help.. someone knows how to... follow the code of the div :

.textotoposobre{
    text-align: center;
    color: white;
    font-family: 'Open Sans';
    align-items: center;
    justify-content: center;
    top: 30%;
    left: 28%;
}

Answer 1

Creating a div father with position: relative, and the div son with position: absolute must solve their problem, provided that the div child is positioned at a distance equivalent to 50% of the container (div father) less than half his own size. This distance should be worth both up and to the left. This can be accomplished as follows:

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

See that, this way, the size of the div father doesn’t matter.

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

.pai{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: aqua; 
}

<div class="pai">
    <div class="filho">Texto texto texto</div>
</div>

Try changing the size of div father to understand behavior.

Answer 2

In the div of the text put **margin: 0 auto;**