动画列表的对齐方式无法像静态内容一样工作

Question

通常，我使用以下CSS将内容放在div中。如您在第一个代码段中所见，文本在div中完美居中。
如果我将其应用于动画列表，如第二个示例中所示，它将不再起作用。 我本人向我解释说，由于无法在对齐内容时“显示”所有列表元素，因此无法正确计算高度。
有人可以详细解释一下为什么这适用于静态内容而不适用于动画列表吗？

  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

这很好，就像这里：

.container {
  display:flex;
  flex-wrap:wrap;    
  flex-direction:row;    
  height:100vh;
  background-color: beige;
}
.container > div {
  min-height: 100vh;
  border:1px solid black;
  box-sizing:border-box;
  background-color: inherit;
}
.half-width {
  width:50%;
}
.half-width > .half-width-content{
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}

.half-width > .half-width-content > .half-width-text {
  position: absolute;
  left: 50%;
  top: 50%;
  visibility: visible;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 4s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="half-width" id="section2">
    <div class="half-width-content">
      <div class="half-width-text">

        <div class="text-content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
        </div>
      </div>
    </div>
  </div>
  </div>

current = 1;      
$(".list-div ul li").each(function(){
        $(this).addClass("animate").css("animation-delay", current + 's');
        current++;
      })

body {
  margin:0;
}
.container {
  display:flex;
  flex-wrap:wrap;    
  flex-direction:row;    
  height:100vh;
  background-color: beige;
}
.container > div {
  min-height: 100vh;
  border:1px solid black;
  box-sizing:border-box;
  background-color: inherit;
}

.half-width-content{  
position: absolute;
  left: 50%;
  top: 50%;
  width: 75vw;
  height: 100vh;
  visibility: visible;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.list-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-div ul {
  padding: 0;
  margin-top: 15%;
  width: 75%;
}

.list-div li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: hidden;
}

.list-div li.animate{
  visibility: visible;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 220px;
  }
  25%{
    opacity: 0.3;
  }
  
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="half-width" id="section2">
        <div class="half-width-content">
          <div class="half-width-text">
      <div class="list-div">
        <ul>
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
      </div>
      </div>