弹性项目不垂直居中

Posted 2023-03-05

【中文标题】弹性项目不垂直居中

【英文标题】：Flex items not centering vertically

【发布时间】：2017-06-11 08:35:30

【问题描述】：

我正在尝试使用弹性框将内容垂直居中，但没有成功。我不喜欢使用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>

【参考方案1】：

将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】：

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

第一步，添加一些高度：

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