How to center html blocks and keep them even after zooming in the page

Question

I am not managing to center my Father block (red block) in the center. I want it to stay in the center so that even after zooming in on the page it’s still centered. I’m not being able to access the properties of "margin", "border" and "padding" through css, or change the white background behind the Pai block (red). I am inciante and I am studying html and css. I ask understanding. OBS: Zeroing the css I managed to change the property "margin", but I didn’t want to.

HTML:

<div class="principal">
    <header class="header">
        Cabeçalho! Faça suas pesquisas aqui!
    </header>

    <article class="busca">
            <form  class="form" method="POST" action="classes/Controller.php">
                CEP: <input type="text" name="cep" placeholder="Insira o cep" required/>
                <input type="submit" /></p>
            </form>
    </article>

    <article class="data">
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
    </article>

    <footer class="rodape">
        Rodapé! Todos os direitos reservados.
    </footer>
</div>

CSS:

.principal{
margin:0;
position:fixed;
background-color: red;
width:600px;
height:600px;
padding:1px;
border:0;
}
.header{
position:relative;
top:12%;
text-align:center;
font-size:150%;
font-family:Georgia;
text-transform: uppercase;
}
.busca{
position:relative;
top:17%;
background-color:purple;
height:150px;
width:580px;
margin-left:10px;
margin-right:10px;
border-radius:10px 10px 0px 0px;
text-align:center;

}.form{
font-size:20px;
position:relative;
background-color:pink;
top:50px;
}
.data{
position:relative;
top:100px;
background-color:yellow;
height:150px;
text-align:center;
font-family:Arial;
margin-left:10px;
margin-right:10px;
border-radius:0px 0px 10px 10px;
}
.rodape{
position:relative;
top:110px;
text-align:center;
}

Answer 1

Your div with position: fixed is related to body, and without specifying position with top, right, left or bottom she will be in the natural position, which is in the upper left corner of the body.

No need to put margin: 0 in the main div because it already is 0 by default.

To center this fixed div, there are several ways. As the div has fixed width (width:600px;), you can use the gambit a technique of positioning the 50% div to the left with left: 50% and then go back to your negative half with margin-left: -301px. Why 301px? Because of the padding: 1px. The width of the div is the sum of the width + padding on the sides (+ edges, of there). As its div is 600px wide and 1px padding, it will be 602px wide, and half of that is 301px. This only works with elements that have fixed width.

See (run in full screen):

.principal{
/*margin:0;*/
position:fixed;
background-color: red;
width:600px;
height:600px;
padding:1px;
border:0;
left: 50%;
margin-left: -301px;
}
.header{
position:relative;
top:12%;
text-align:center;
font-size:150%;
font-family:Georgia;
text-transform: uppercase;
}
.busca{
position:relative;
top:17%;
background-color:purple;
height:150px;
width:580px;
margin-left:10px;
margin-right:10px;
border-radius:10px 10px 0px 0px;
text-align:center;

}.form{
font-size:20px;
position:relative;
background-color:pink;
top:50px;
}
.data{
position:relative;
top:100px;
background-color:yellow;
height:150px;
text-align:center;
font-family:Arial;
margin-left:10px;
margin-right:10px;
border-radius:0px 0px 10px 10px;
}
.rodape{
position:relative;
top:110px;
text-align:center;
}

<div class="principal">
    <header class="header">
        Cabeçalho! Faça suas pesquisas aqui!
    </header>

    <article class="busca">
            <form  class="form" method="POST" action="classes/Controller.php">
                CEP: <input type="text" name="cep" placeholder="Insira o cep" required/>
                <input type="submit" /></p>
            </form>
    </article>

    <article class="data">
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
        Endereço aqui! Endereço aqui! Endereço aqui!<br>
    </article>

    <footer class="rodape">
        Rodapé! Todos os direitos reservados.
    </footer>
</div>

Answer 2

In CSS, for the body page, put like this:

body
{
    display: flex;
    justify-content: center;
}

in the tag body put is just do the msm procedure you did to set the red background