Question

我尝试使用弹性框垂直居中，但没有成功。我不想使用position或translate因为它不是固定大小。我的代码出了什么问题？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

第一步，添加一些高度：

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

Answer 2

将height: 100%添加到html, body, .container-fluid，并使.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>

柔性物品不垂直居中

2 个答案: