伸缩项目未垂直居中

您的伸缩容器没有多余的高度。唯一的高度是内容的高度。因此，没有用于垂直居中的空间。

第一步，增加一些高度：

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

第二步，删除不必要的规则，其中一些规则会阻止垂直对齐。

.col-centered {    display: flex;    flex-direction: column;   }.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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><section id="us" >  <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>