CSS: Few questions about position absolute

Question

I've got a few questions about position: absolute centered elements. I was looking on almost every position absolute articles, but didn't find something that would explain me this strange behaviour that I am now asking about. Here is codepen that relates to the questions(expect third question): https://codepen.io/anon/pen/LQrjzz

1. Why does div jump down, when changed div width units from px to percentage(40px = 12.2%) How can I fix this, if I want to use percentage?
2. Why does div jump down, when resizing a window even when there is still space(https://i.imgur.com/4DPu9Vp.gifv)? How can I fix this?
3. Why in this snippet second div's height = 0? I've expected its height to be 50px as width.

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

#first{
  width: 100px;
  height: 100px;
  background: black;
}

#second{
  width: 50%;
  height: 50%;
  background: aqua;
}

<main>
  <div id="first"></div>
  <div id="second"></div>
</main>

//code from codepen

HTML:

<main>
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor</p>
  <div></div>
</main>

CSS:

main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px red solid;
  padding: 10px;
}

h1{
  font-size: 32px;
  width: 10em;
  border: 2px black dotted;
}

p{
  font-size: 32px;
  width: 10em;
  border: 2px green dotted;
  display: inline-block;
  vertical-align: middle;
}

div{
  display: inline-block;
  width: 40px; /*  12.2%  */
  height: 40px;
  background: lawngreen;
  vertical-align: middle;
  border: 2px blue dotted;
}

I hope those questions weren't dumb. Thank you very much.

Answer 1

Why does div jump down, when changed div width units from px to percentage(40px = 12.2%) How can I fix this, if I want to use percentage?

Your div is in a container that has no defined width. Since the div itself can change the width of the container, CSS cannot resolve a width set as a percentage. To solve that depends on what is your actual goal...

Why does div jump down, when resizing a window even when there is still space? How can I fix this?

By default, left, right, bottom, top are set to auto. The width of your container is set by its content, but auto on a side property means "the value of right cannot be lower than 0." So, since your left is set to 50% and right to auto (default), it is equivalent to setting max-width to 50%: your container cannot take more than 50% of it relative parent width.

Here a GIF to help you visualize what's happening:

To solve that, you need another wrapper and a different centering trick such as inline-block content:

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

*{
  margin: 0;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/**
 new element
 */
.center{
  position: absolute;
  top: 50%;
  left: 0;
  width : 100%;
  font-size : 0;
  text-align:center;
  transform: translateY(-50%);
}

/**
 center with inline block
 */
main{
  display:inline-block;
  font-size : 1rem;
  border: 2px red solid;
  padding: 10px;
}

h1{
  font-size: 32px;
  width: 10em;
  border: 2px black dotted;
}

p{
  font-size: 32px;
  width: 10em;
  border: 2px green dotted;
  display: inline-block;
  vertical-align: middle;
}

.block{
  display: inline-block;
  width: 40px; /*  12.2%  */
  height: 40px;
  background: lawngreen;
  vertical-align: middle;
  border: 2px blue dotted;
}

<div class="center">
  <main>
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor</p>
    <div class="block"></div>
  </main>
</div>

Why in this snippet second div's height = 0? I've expected its height to be 50px as width.

This occurs for the exact same reason as question #1. Again, we need to know your final goal to further help you achieve what you want here.