If the height of the .pricecontainermobile block is fixed, you can put it, together with the img, in a container, and then position the container inside #placement, rather than the img.

So I fixed the heights of the h1 and h2 to 18px; you can change that if you want. Also note that I used a placeholder image for the img.

.pricecontainermobile>h2 {
  text-align: center;
  font-size: 12px;
  line-height: 24px; /* new: fix height */
  margin: 0;
}

.pricecontainermobile>h1 {
  font-family: 'neue-haas-grotesk-text', sans-serif;
  color: white;
  font-weight: 500;
  font-style: normal;
  list-style: none;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  line-height: 24px; /* new: fix height */
  margin: 0;
}

.pricecontainermobile {
  display: block;
  width: 100%;
  background: blue;
  position: absolute;
  padding: 6px 0; /* new: correct header's margins */
}

#placement {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 88%;
  margin-left: 6%;
  background: red;
}

#placement .imgcontainer { /* new: moved from img */
  position: relative;
  top: calc(50% - 30px); /* corrected for height of header */
  transform: translateY(-50%);
}

#placement img {
  vertical-align:top;
  width: 100%;
  height: auto;
}

<div id="placement">
  <div class="imgcontainer">
    <img src="https://placehold.it/600x200" alt="." />
    <div class="pricecontainermobile">
      <h1>TEST</h1>
      <h2>$ 30.00</h2>
    </div>
  </div>
</div>

I have an image that is 88% of the viewport width, so it’s height is dynamic. I need to position my .pricecontainermobile div directly below the image so it stays directly below it regardless of the viewport… I have tried to set this up via position: absolute / relative, but I cannot get it to work as I need my image to be vertically centered (minus 46px)… I believe this is messing with the absolute / relative… Where am I going wrong?

NOTE This is only for portrait orientation… please view the code in this orientation to see the correct styling and such.

JSFiddle: https://jsfiddle.net/cz9hebg7/1/

Code:

 <div id="placement">
      <img src="images/" alt="."/>
      <div class="pricecontainermobile">
        <h1>TEST</h1>
        <h2>$ 30.00</h2>
      </div>
    </div>



.pricecontainermobile>h2 {
  text-align: center;
  font-size: 12px;
}

.pricecontainermobile>h1 {
  display: block;
  font-family: neue-haas-grotesk-text, sans-serif;
  color: white;
  font-weight: 500;
  font-style: normal;
  list-style: none;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  top: 0;
}

.pricecontainermobile {
  display: block;
  width: 100%;
  background: blue;
  position: absolute;
}
#placement {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 88%;
    margin-left: 6%;
    background: red;
}
#placement img {        
    width: 100%;
    height: auto;
    position: relative;
    top: calc(50% - 46px);
    transform: translateY(-50%); 
}