Div moving on the screen change

Question

Div moving on the screen change

Navigation

#1 by (2 votes)

-1

My initial site has an html start:

<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 will occupy 100% on any screen size. However, when I expands the screen (raise the screen I am) to central div goes up a bit, misaligning what is to be in the middle.

Minimized screen picture

Maximizedon-screenphoto

How do I leave the div exactly in the middle on any screen size? I still can not do this. When I make a site in my notebook, and open it on a computer, everything is out of place (usually it's high) since on the sides I always center or set the left margin in%.

javascript html jquery css

asked by anonymous 11.11.2017 / 03:55

1 answer

Add values in a 3-dimensional array Mobile framework for development in Cordova [closed]

score 2 · Accepted Answer

Use the recent 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 will be able to set the display:flex value in the parent div to% d and justify-content: center to center the child element (which would be your image)