Flex items not centering vertically

I'm trying to center vertically the content with flex boxes without success. I don't like to use position or translate because it is not a fixed size. What is wrong with my code?

.row-centered { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
.col-centered { display: flex; flex-direction: column; align-self: flex-start; float: none; margin-right: 0 auto;
}
.us-container{ display: flex; justify-content: center; align-items: center; vertical-align: middle; resize: both; overflow: auto;
}
.us-container div{ resize: both; overflow: auto;
}

 <link rel="stylesheet" href="">
<section> <div> <div> <p>blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah </p> <h3>blah blah blah</h3> </div> </div> </section>

2 Answers

Your flex container has no extra height. The only height is the height of the content. Therefore, there is no space for vertical centering.

First step, add some height:

.row-centered { display: flex; height: 100vh;
}

Second step, remove unnecessary rules, some of which are preventing vertical alignment.

.col-centered { display: flex; flex-direction: column; /* align-self: flex-start; float: none; margin-right: 0 auto; */
}

.row-centered { display: flex; height: 100vh;
}
.col-centered { display: flex; flex-direction: column;
}
.us-container { display: flex; justify-content: center; align-items: center;
}

<link href="" rel="stylesheet" />
<section> <div> <div> <p>blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</p> <h3>blah blah blah</h3> </div> </div>
</section>

Add height: 100% to html, body, .container-fluid and make .container-fluid also be a flex container as shown below.

html, body, .container-fluid { height: 100%;
}
.row-centered, .container-fluid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
.col-centered { display: flex; flex-direction: column; align-self: flex-start; float: none; margin-right: 0 auto;
}
.us-container{ display: flex; justify-content: center; align-items: center; vertical-align: middle; resize: both; overflow: auto;
}
.us-container div{ resize: both; overflow: auto;
}

<link rel="stylesheet" href="">
<section> <div> <div> <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p> <h3>blah blah blah</h3> </div> </div> </section>