Central align of elements CSS without flexbox

to use vertical-align:middle add display:table-cellon .home-row and display:table on .home-container

see here jsfiddle or snippet

html,
body {
  height: 100%;
}



.home-row {
  vertical-align: middle;
  display: table-cell;
}

.home-container {
  width: 100%;
  height: 100%;

  background-color: rgba(139, 0, 0, 0.4);
  display: table;

}

<div class="home-container">
  <div class="home-row">
    <div class="some-other-class">
      <p>text that should be in the middle</p>
    </div>
  </div>
</div>

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

read more here vertical align

EDIT 2020 There's a better way to achieve the same result using flexbox

Check snippet below

Play around with flexbox. You can add it on other items not just the container

.home-container {
  background: red;
  display:flex;
  flex-direction: column;
  justify-content: center;
  height:100vh;
 }

<div class="home-container">
  <div class="home-row">
    <div class="some-other-class">
      <p>text that should be in the middle</p>
    </div>
  </div>
</div>

Try this:

 <style>
    .home-container {
        width: 100%;
        height: 800px;
        background-color: rgba(139, 0, 0, 0.4);
        text-align: center;
    }

    .some-other-class {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

HTML

<div class="home-container">
    <div class="some-other-class">
        <p>text that should be in the middle</p>
    </div>
</div>