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

Issue

I have a certain small text on the card which I was able to align center vertically. But if you make the text big then everything deteriorates.

I made two options and they work independently of each other, but they do not work together. In the large text some of the text is lost.

Important note: Text should always be centered vertically.

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

Big text: 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;
}

Small text: CodePen

Thank you!

Solution

You don't need to wrap the flexbox:

1. Remove flex-wrap: wrap from article-div (and therefore align-content: center which has meaning only when wrapping)

2. article-div is not a flex item (its parent info-div is not a flexbox), so flex: 1 0 auto can be removed.

See demo below with both the cases:

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

The above approach hides the top and bottom portion of the content when there is an overflow. Below is an approach using an extra wrapper that is positioned absolutely - check it out:

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

Answered By - kukkuz

Answer Checked By - Marilyn (PHPFixing Volunteer)