更改内容时如何在页面上垂直居中？

Question

我在卡片上有一个小文字，我可以垂直对齐中心。 但如果你把文字做得很大，那么一切都会恶化。

我做了两个选项，他们彼此独立工作，但他们不能一起工作。在大文本中，一些文本丢失了。

重要说明：文字应始终垂直居中。

.article-div{
    height: calc(100% - 100px);
    padding: 0px 40px 0px 40px;
    text-align: justify;
    overflow: auto;
}

大文：CodePen

.article-div{
    height: calc(100% - 100px);
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content:  center;
    padding: 0px 40px 0px 40px;
    text-align: justify;
    overflow: auto;
}

小文字：CodePen

谢谢！

Answer 1

.article-div{
   border:solid 1px red;
   height: calc(100% - 100px);
   display: flex;
   flex: 1 0 auto;
   flex-flow: column nowrap;
   align-content: center;
   justify-content:  center;
   padding: 0px 40px 0px 40px;
   text-align: justify;
   overflow: auto;
}
.article-div p{
   flex: 0 0 auto;  
}

Small text Code pen

Answer 2

您不需要换行 flexbox：

1. 从flex-wrap: wrap移除article-div（因此align-content: center仅在换行时有意义

2. article-div不是 flex项（其父info-div不是flexbox），因此可以删除flex: 1 0 auto

请参阅以下两个案例演示：

＆＃13;
＆＃13;
.card-card {
  width: 1000px;
  min-width: 1000px;
  height: 560px;
  display: flex;
  margin: 50px auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  text-decoration: none;
  border-radius: 0px;
  background-color: #fff;
}

.card-img-div {
  width: 384px;
  height: 560px;
  position: relative;
}

.card-img {
  height: 560px;
  border-radius: 0px 0 0 0px;
  position: absolute;
  clip: rect(0px, 384px, 562px, 0px);
  left: -0px;
}

.info-div {
  width: 616px;
  height: 100%;
  border-radius: 0 0px 0px 0;
}

.caption-div {
  width: 100%;
  height: 50px;
}

.footer-div {
  width: 100%;
  height: 50px;
}

.article-div {
  height: calc(100% - 100px);
  display: flex;
  /*flex: 1 0 auto;*/
  flex-direction: column;
  /*flex-wrap: wrap;
  align-content: center;*/
  justify-content: center;
  padding: 0px 40px 0px 40px;
  text-align: justify;
  overflow: auto;
}
＆＃13;
<div class="card-card">
  <div class="card-img-div">
    <img class="card-img" src="http://podsekai.in.ua/wp-content/uploads/2015/02/карась-серебряный.jpg" />
  </div>
  <div class="info-div">
    <div class="caption-div"></div>
    <div class="article-div">
<p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся практически в каждом водоеме.
</p>
<p>
Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания. 
  </p>
    </div>
      
    <div class="footer-div"></div>
  </div>
 </div>
 
 <div class="card-card">
  <div class="card-img-div">
    <img class="card-img" src="http://podsekai.in.ua/wp-content/uploads/2015/02/карась-серебряный.jpg" />
  </div>
  <div class="info-div">
    <div class="caption-div"></div>
    <div class="article-div">
<p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся практически в каждом водоеме.
</p>
<p>
Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания. 
  </p>
<p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся практически в каждом водоеме.
</p>
<p>
Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания. 
  </p>
<p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся практически в каждом водоеме.
</p>
<p>
Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания. 
  </p>
<p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся практически в каждом водоеме.
</p>
<p>
Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания. 
  </p>      
    </div>
      
    <div class="footer-div"></div>
  </div>
 </div>
＆＃13;
＆＃13;
＆＃13;

当出现溢出时，上述方法隐藏了内容的顶部和底部。下面是使用额外包装的方法绝对定位 - 检查出来：

＆＃13;
＆＃13;
.card-card {
  width: 1000px;
  min-width: 1000px;
  height: 560px;
  display: flex;
  margin: 50px auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  text-decoration: none;
  border-radius: 0px;
  background-color: #fff;
}

.card-img-div {
  width: 384px;
  height: 560px;
  position: relative;
}

.card-img {
  height: 560px;
  border-radius: 0px 0 0 0px;
  position: absolute;
  clip: rect(0px, 384px, 562px, 0px);
  left: -0px;
}

.info-div {
  width: 616px;
  height: 100%;
  border-radius: 0 0px 0px 0;
}

.caption-div {
  width: 100%;
  height: 50px;
}

.footer-div {
  width: 100%;
  height: 50px;
}

.article-div {
  height: calc(100% - 100px);
  /*padding: 0px 40px 0px 40px;*/
  text-align: justify;
  overflow: auto;
  position: relative;
}

.article-div>div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 80px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
＆＃13;
<div class="card-card">
  <div class="card-img-div">
    <img class="card-img" src="http://podsekai.in.ua/wp-content/uploads/2015/02/карась-серебряный.jpg" />
  </div>
  <div class="info-div">
    <div class="caption-div"></div>
    <div class="article-div">
      <div>
        <p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся
          практически в каждом водоеме.
        </p>
        <p>
          Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания.
        </p>
      </div>
    </div>

    <div class="footer-div"></div>
  </div>
</div>

<div class="card-card">
  <div class="card-img-div">
    <img class="card-img" src="http://podsekai.in.ua/wp-content/uploads/2015/02/карась-серебряный.jpg" />
  </div>
  <div class="info-div">
    <div class="caption-div"></div>
    <div class="article-div">
      <div>
        <p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся
          практически в каждом водоеме.
        </p>
        <p>
          Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания.
        </p>
        <p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся
          практически в каждом водоеме.
        </p>
        <p>
          Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания.
        </p>
        <p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся
          практически в каждом водоеме.
        </p>
        <p>
          Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания.
        </p>
        <p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся
          практически в каждом водоеме.
        </p>
        <p>
          Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания.
        </p>
      </div>
    </div>

    <div class="footer-div"></div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;