Align problem when I try to center and align items with flex - html

Question

I just came across this problem. Everything seems ok, but I don't understand where is the problem. Centering and aligning items at the same time are not good?
Only I wanted to write down 3 div in the column direction. I can not change the structure because I will try something with this structure.
This is how does it look like. https://codepen.io/vortovor/pen/ExXZMzR
.col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: pink;
}
.col>div {
background: #ddd;
<div class="row">
<div class="col">
<div class="top">
<div>Hello</div>
<div>I'm</div>
</div>
<div class="bottom">
<div>Here</div>
</div>
</div>
</div>

Answer 1

You are missing the height property in your .col add to your code
.col{
height: 500px;
border: 1px black solid;
}
so can see that is working fine:
.col {
height: 500px;
border: 1px black solid;
}
/* orginal CSS */
.col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="row">
<div class="col">
<div class="top">
<div>Hello</div>
<div>I'm</div>
</div>
<div class="bottom">
<div>Here</div>
</div>
</div>
</div>

Answer 2

the code is fine, what happens is the size of the content of your divs.
if you add a class to all your word divs
.a {
text-align: center;
border: 1px red solid;
width: 100px;
}
at the moment you have the width of each word which are different and you alignment is centre, therefore it looks like:
one
onelong
oneme