Aligning image in middle of content

I have css where tags associated with an image only if a class "large" is applied. When class "medium" is applied, only the image shows. In both cases, the image should be vertically and horizontally center, but the tags should be aligned left.

The issue is that the image is aligned in the middle, but when the tags are available (i.e., when "large is applied" the image loses alignment and is aligned to the left.

to clarify the question: I want the tags to be aligned left, and the image to be aligned middle/center. This works with the "middle" class, but not when the tags are shown in "large."

HTML

<div class="img-box"
   v-if="imageClass === 'large' ||
        imageClass === 'medium'"
   >
   <img src="" :class="imageClass"/>
   <div class="tag-container"
      v-if="imageClass === 'large'"
      >
      <span class="tag" v-for="tag in Tags" 
       :key="tag">{{tag }}</span>
   </div>

CSS

.img-box {
    justify-self: center;
    align-self: center;
  }

.medium {}

.large {
  justify-self: center;
  align-self: center;
 }

.tag-container {
   justify-self: center;
   text-align: center;
 }