Why is the orange square not vertically centered?

Question

css

Hello.
Here is the code .
Why is the orange square not vertically centered?

Answer 1

codepen.io/aliencash/pen/BoGMrJ

Answer 2

codepen.io/aurfon/pen/bVQzmK
Required reading -> css-live.ru/articles/obzor-inlajnovyj-kontekst-for...

Answer 3

The easiest way to vertically align with flexboxes: codepen.io/SvDen/pen/OyadQO
If you add an external div, then you can get rid of the float altogether.

Answer 4

codepen.io/anon/pen/EVOMJv