JSFiddle - React, Tailwind, and code Playground

HTML

<div class='quotation_div'>
  <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;
    background: url('http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg') no-repeat top center ;
    background-size: 100% auto;
}

.overlay {
    display: table-cell;
    vertical-align: middle;
}
p {
    text-align: center;
    color: red;
    font-size: 165%;
    font-weight: lighter;
    line-height: 2;
    padding: 0 10%;
}