Flex 项目不垂直居中 [英] Flex items not centering vertically

问题描述

我试图用弹性框垂直居中内容，但没有成功.我不喜欢使用 position 或 translate 因为它不是固定大小.我的代码有什么问题?

.row-central {显示:弹性；flex-wrap: 包裹;对齐内容:居中；对齐项目:居中；}.col 为中心 {显示:弹性；弹性方向:列；align-self: flex-start;浮动:无；右边距:0 自动；}.us-容器{显示:弹性；对齐内容:居中；对齐项目:居中；垂直对齐:中间；调整大小:两者；溢出:自动；}.us 容器 div{调整大小:两者；溢出:自动；}

 <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 以行为中心的 us-container"><div class="col-sm-8 col-md-8 col-xs-8 col-centric"><，P类=文本对齐">等等等等等等等等等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜、、、、、<h3 class="text-center">等等等等</h3>

</section>

解决方案

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

第一步，添加一些高度:

.row 为中心的 {显示:弹性；高度:100vh；}

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

.col 为中心的 {显示:弹性；弹性方向:列；/* align-self: flex-start;浮动:无；右边距:0 自动；*/}

.row-central {显示:弹性；高度:100vh；}.col 为中心 {显示:弹性；弹性方向:列；}.us-容器{显示:弹性；对齐内容:居中；对齐项目:居中；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><section id="us" class="container-fluid"><div class="row 以行为中心的 us-container"><div class="col-sm-8 col-md-8 col-xs-8 col-centric"><，P类=文本对齐">等等等等等等等等等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah等等blahblah嗒嗒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊……<h3 class="text-center">等等等等</h3>

</section>

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>

解决方案

Your flex container has no extra height. The only height is the height of the content. Therefore, there is no space for vertical centering.

First step, add some height:

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

Second step, remove unnecessary rules, some of which are preventing vertical alignment.

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

这篇关于Flex 项目不垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！