Div moving in changing screen

Question

My home site has a start html:

<header class="headd">
    <div id="divcentral">
        <a href="index.html" id="linklogocentral"><img src="img/logo.png" id="logocentral"></a>
        <h1 id="titulo">Lukas Monteiro</h1>
        <h2 id="subtitulo">Bem vindo</h2>
        <a href="#meuMenu" id="linksetabaixo" class="scroll"><img src="botao/setabaixo.png" id="setabaixo"></a>
    </div>
</header>

and in css I put:

header {
width: 100%; 
height: 100%;  
background-image: url(../img/backgroundheader1.png); 
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

#divcentral {
width: 407px;
height: 500px;
margin: auto;
padding-top: 200px;
text-align: center;
}

so that the initial part of the site occupies 100% on any screen size. However, when I expand the screen(increase the screen I am) to div central rises a little, misaligning what is to be in the middle.

Photo on minimized screen

Photo on screen maximized

How do I leave the div exactly in the middle on any screen size? I still can’t do it. When I make a website on my laptop, and open it on a computer EVERYTHING is out of place (usually in height) since on the sides I always center or put margin left on %.

Answer 1

Use the latest and modern display: flex to solve your problems!

#container{
    background-color: steelblue;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}


#center{
   width: 100px;
   height: 100px;
   background-color: #222;
}

<div id="container">
  <div id="center">
  </div>
</div>

In your case, you can define in the "father div" of your image the value display:flex, combined with justify-content: center and align-items: center to center the "child element" (which would be its image)