JSFiddle - React, Tailwind, and code Playground

HTML

<div class='quotation_div'>
  <img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
  <div class='overlay'>
      <p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
  </div>
</div>

CSS

.quotation_div {
    position: relative;
    display: table;
    height: 300px
}
img {
   width: 100%;
   max-height: 100%;
    position: absolute;
}
.overlay {
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    display: table-cell;
}
p {
    text-align: center;
    color: red;
    font-size: 165%;
    font-weight: lighter;
    line-height: 2;
    padding: 0 10%;
}