Flex项目垂直居中不对齐

Question

我想使用flexbox来垂直居中内容，但一直没有成功。我不想使用position或translate，因为它们不能适应不同大小的屏幕。请问我的代码有什么问题吗？

.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>

- isk27

Answer 1

你的flex容器没有额外的高度。唯一的高度是内容的高度。因此，没有垂直居中的空间。

第一步，增加一些高度：

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

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

.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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>

- Michael Benjamin

Answer 2

将html，body，.container-fluid的height属性设置为100%，并将.container-fluid设为弹性容器，如下所示。

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="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 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 class="text-center">blah blah blah</h3>
            </div>
            </div>
    </section>

- Johannes