Q:

Как сделать, чтобы элемент находился всегда по центру(по высоте), при изменении размера окна?

У меня есть блок(200х400). И внутри этого блока есть еще один блок(50х50). Хочу чтобы при изменении размера окна, данный дочерний блок все время находился по центру(по высоте).
Как бы я ни делал, с позиционированием relative: top 50%, margin-top - не помогает. Блок все же смещается. Кто подскажет, как решить данную проблему?

A:

Два способа, если знаете ширину и высоту у блока, и если нет:
Пример

* {
  margin: 0;
  padding: 0;
}

section,
div {
  position: relative;
  display: block;
  float: left;
  width: 200px;
  height: 200px;
  margin-right: 10px;
  border: 1px solid red;
}

article,
p {
  width: 50px;
  height: 50px;
  background: blue;
}


/*1 cпособ */


/*если знаем высоту и ширину блока*/

article {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0px 0px -25px;
}


/*2 cпособ */


/*если НЕзнаем высоту и ширину блока*/

p {
  display: inline-block;
  vertical-align: middle;
  height: 30%;
  width: 30%;
}

div {
  text-align: center;
}

div:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 1px;
}
<section>
  <article></article>
</section>
<div>
  <p></p>
</div>

