Div align center

<div class="block" style="height: 300px;">

    <div class="centered">

        <h1>Title one</h1>

        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>

    </div>

</div>

<div class="block" style="height: 200px;">

    <div class="centered">

        <h1>Title two</h1>

        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>

    </div>

</div>

<div class="block" style="height: 600px;">

    <div class="centered">

        <h1>Title three</h1>

        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>

    </div>

</div>

.block {

  font-family:sans-serif;

  text-align: center;

  background: rgb(231, 76, 60);

  margin: 20px;

}

.block:before {

  content: '';

  display: inline-block;

  height: 100%; 

  vertical-align: middle;

  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 

  background: #808080; width: 5px;

  */

 }

.centered {

  display: inline-block;

  vertical-align: middle;

  width: 300px;

  padding: 10px 15px;

  background: rgb(192, 57, 43);

  color:#fff;

 }

jQuery(document).ready(function() {

  $('.link').click(function(event) {

    $('.box').toggleClass('active');

    e.preventDefault();

  });

});