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

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:

从 article-div 中删除 flex-wrap: wrap（因此 align-content: center 只有在 wrapping 时才有意义）
article-div 不是 flex 项目（它的父 info-div 不是 flexbox），所以 flex: 1 0 auto可以去掉。

请参阅以下两种情况的演示：

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

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

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

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

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

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

How to vertically center a div on page when changing content?

html

css

vertical-alignment

flexbox