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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="us" class="container-fluid">
<div class="row row-centered us-container">
<div class="col-sm-8 col-md-8 col-xs-8 col-centered ">
<p class="text-justify">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 class="text-center">blah blah blah</h3>
</div>
</div>
</section>
See Question&Answers more detail:os