How to horizontally align div relative to its parent?

I'm a little confused why I can't do it, set the div in the center of the height of the parent div ....
i.e. the sense that I want to make a rectangle, there will be written code. And right, center should be a comment.
But the div tag is why it thinks that when I'm writing (margin-top: 50px;), it is necessary to count not from the beginning of the margin-top to its parent, and the text that is written in the parent ...
I don't understand why this is so .... :(
Tell me to understand.
Here is the code:


 <style type="text/css">
.f1
{
width:100%;
 height: 200px;
 background: #CCC;
 } 
.f2
{
 width: 10%;
 height: 100px;
 top: 100px;
 margin-left: 90%;
 margin-top: 50px;
 background: #7DE2D2;
}
</style>
 <div class="f1">
 the <pre> Hello my friends !!! (1)
 Hello my friends !!! (2)
 Hello my friends !!! (3)
 Hello my friends !!! (4)
 Hello my friends !!! (5)
 Hello my friends !!! (6)
 Hello my friends !!! (7)
 Hello my friends !!! (8)
 Hello my friends !!! (9)
 Hello my friends !!! (10) 
</pre>
 <div class="f2">Hi</div>
</div>


And here that at me turns out in the end ....
83545e27348247b1a536fec9c5052791.JPG
I'd like, what would a cube with text <> was at the center of the gray region, and glued to the right edge, but I did not go
July 2nd 19 at 17:30
1 answer
July 2nd 19 at 17:32
Solution
Update: the code is not correct, the block elements. Naturally they are under each other

So we can solve the problem https://jsfiddle.net/x8emxa2v/
Oooo .... Cool .. I didn't know that so you can ....
And here's another question ...
And it would be possible to do so that the comment text was always in the middle of the div tag ?
https://jsfiddle.net/x8emxa2v/1/
I mean, if the text will be a lot ... - Abdiel commented on July 2nd 19 at 17:35

Find more questions by tags CSSHTML