Div does not center

Question

.container-form {
    width: 300px;
    height: 300px;
    background-color: rgb(22, 20, 20);
    position: relative;
 }

.filha {
    width: 100px;
    height: 100px;
    background-color: azure;
    position: absolute;
    top: 50%;
    left: 50%;
}

*{   
    margin: 0px;
    padding: 0px;
}

<div class="container-form">    
    <div class="filha">
    </div>
</div>

I have tried everything and I cannot center any div inside another or any element in relation to the body... It’s like I put 50% in one direction, but in practice it’s like 70%... Someone can help me solve this problem?

Answer 1

You must add transform: translate(-50%,-50%);. This property moves an element from its current position (according to the parameters given for the X axis and the Y axis). See resolved:

.container-form {
    width: 300px;
    height: 300px;
    background-color: rgb(22, 20, 20);
    position: relative;
 }

.filha {
    width: 100px;
    height: 100px;
    background-color: azure;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

*{   
    margin: 0px;
    padding: 0px;
}

<div class="container-form">    
    <div class="filha">
    </div>
</div>