Having issues with vertical alignment (Flexbox) and center alignment

I'm using javascript to display dynamic text and image, but having trouble with formatting.

1. I'm using display: flex to put text and image next to each other, but am having trouble horizontally aligning them. Right now, it looks like:

But I'd like to horizontally align them so that it becomes:

I've tried the following, but this didn't work

  #conA #container {
    display: flex;
      flex-direction: row;    
    justify-content: center; 
    align-items: center;   
  } 

Update:

Implementing the following code but NOT setting the height of #heroText and #images the same

  #conA #container {
        display: flex;
          flex-direction: row;    
        justify-content: center; 
        align-items: center;   
      } 

does center text and images horizontally when both are present. However, once the images disappear, the text jumps. Here's how it's behaving https://imgur.com/a/7yYl8zO I'd like the text to not move when images disappear

Once I set the heights of #heroText and #images the same, it then turns to this:

2. I'm also looking to center the whole text+image in the parent div (#conA, which takes up full screen 100vh). I tried the following:

     #conA  {
     position: relative;  
      }
   
      #conA #container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      }
   

But it looks odd b/c text keeps moving/jumping depending on whether there's an image displayed. So when there's no image, it looks like:

When when images appear, text moves to left so that the whole thing becomes centered:

How can I fix the position of text here? I'd like the whole thing is centered when there's an image. So when there's no image:

When there's an image:

html

<section id="conA">
<div id="container">
  <div id="heroText">
    <div id="text-fixed">I'm a fixed text</div>
    <div id="text"></div>
  </div>
  <div id="images"></div>
</div>
</section>

css

#conA {
  height: 100vh;
  position: relative;
}


#conA #container {
  margin: 0;
}


#conA #text {
  display: initial;
  border-right: 3px solid #56525E;
}


  #heroText {
  line-height: 1.7;
  font-size: 30px;
  width: 800px;
  }


  #conA #container {
    margin: 0;
    display: flex;
  }

  #heroText {
    height: 400px;
  }


  #conA #images {
    height: 400px;
} 



#conA img
{
  display:none;
  height: 400px;
}

#conA img.invisible
{
  visibility: hidden;
}

#conA img.show
{
  display:inline;
}

#conA img.anim1
{
  animation-duration: 2000ms;
}

#conA img.anim2
{
  animation-duration: 2000ms;
}

#conA img.anim3
{
  animation-duration: 2000ms;
}


.fadeIn
{
  animation-name: fadeIn;
}

@keyframes fadeIn 
{
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.fadeOut
{
  animation-name: fadeOut;
}

javascript code for dynamic display of text and image

// List of sentences
var _CONTENT = [ "I'm the first sentence.", "I'm the second sentence."
, "I'm the third sentence.", "I'm the fourth sentence." ];


var IMAGE_URLS = ['img/image1.png', 'img/image2.jpg', 'img/image3.png', 'img/image1.png','img/image2.png','img/image3.png', 'img/image4.png','img/image5.png'];

var IMAGES = jQuery.map(IMAGE_URLS, function (url, index){ 
  var img = document.createElement('img'); 
  img.setAttribute('src', url); 
  img.classList.add('anim'+((index%2)+1)); 
  img.classList.add('fadeOut'); 
  document.getElementById('images').appendChild(img); 
  return img;
}); 

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Implements typing effect
function Type() { 
  var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
  _ELEMENT.innerHTML = text;
  _PART_INDEX++;

  // If full sentence has been displayed then start to delete the sentence after some time
  if(text === _CONTENT[_PART]) {

  var imgIndexBase = _PART*2;
    IMAGES[imgIndexBase].classList.remove('fadeOut');
    IMAGES[imgIndexBase+1].classList.remove('fadeOut');
    setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeIn'); }, 0);
    setTimeout(function () { IMAGES[imgIndexBase].classList.add('show'); }, 0);
    setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeOut'); }, 2000);
    setTimeout(function () { IMAGES[imgIndexBase].classList.remove('fadeOut'); }, 3000);
    setTimeout(function () { IMAGES[imgIndexBase].classList.remove('show'); }, 3000);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeIn'); }, 0);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('show'); }, 0);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeOut'); }, 2000);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('fadeOut'); }, 3000);
    setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('show'); }, 3000);




    clearInterval(_INTERVAL_VAL);
    setTimeout(function() {
      _INTERVAL_VAL = setInterval(Delete, 50);
    }, 4000);

  }
}




// Implements deleting effect
function Delete() {
  var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
  _ELEMENT.innerHTML = text;
  _PART_INDEX--;

  // If sentence has been deleted then start to display the next sentence
  if(text === '') {
 


    clearInterval(_INTERVAL_VAL);

    // If last sentence then display the first one, else move to the next
    if(_PART == (_CONTENT.length - 1))
      _PART = 0;
    else
      _PART++;
    _PART_INDEX = 0;

    // Start to display the next sentence after some time
    setTimeout(function() {
      _INTERVAL_VAL = setInterval(Type, 100);
    }, 500);
  }
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);