How do I put 'fadein' and 'animate' texts in the middle of the page?

Question

I was wondering if it is possible to assign a group of stacking texts in the middle of the page? placing them in the center wasn't too difficult, but the problem was that they are positioned left, right, top, and bottom, which I think means they need to be given: position:absolute. Furthermore, the .headline texts are given fade-in(opacity 0 to 100) and animation commands. In terms of scaling, the texts are responsive, and get smaller as the window gets smaller. In addition they are assigned their own z-index.

In the image below, I have laid out the overall structure I would like to achieve, but I'm experiencing a lot of difficulty doing so because of the text behaviors I want to accomplish.

For functionality reference, here is a jsfiddle.

Please help me and thank you in advance! Please note that I would prefer to use CSS only since it's a simple function that only occurs once upon page load. However, if this is a issue that only javascript can solve, please let me know :)

.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.fade {
    -webkit-animation-name: fade;
    -moz-animation-name: fade;
    -o-animation-name: fade;
    animation-name: fade;
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes flowright {
    0% {
        opacity: 0;
        left: -100px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@keyframes flowright {
    0% {
        opacity: 0;
        left: -100px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@-webkit-keyframes flowleft {
    0% {
        opacity: 0;
        right: -100px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@keyframes flowleft {
    0% {
        opacity: 0;
        right: -100px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@-webkit-keyframes flowup {
    0% {
        opacity: 0;
        margin-top: 100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@keyframes flowup {
    0% {
        opacity: 0;
        margin-top: 100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@-webkit-keyframes flowdown {
    0% {
        opacity: 0;
        margin-top: -100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@keyframes flowdown {
    0% {
        opacity: 0;
        margin-top: -100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
.flow {
    display: inline-block;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: both;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.right {
    -webkit-animation-name: flowright;
    animation-name: flowright;
}
.left {
    -webkit-animation-name: flowleft;
    animation-name: flowleft;
}
.up {
    -webkit-animation-name: flowup;
    animation-name: flowup;
}
.down {
    -webkit-animation-name: flowdown;
    animation-name: flowdown;
}
.sequence01 {
    -webkit-animation-delay: 0.1s;
}
.sequence02 {
    -webkit-animation-delay: 0.2s;
}
.sequence03 {
    -webkit-animation-delay: 0.3s;
}
.sequence04 {
    -webkit-animation-delay: 0.4s;
}
/* Headline Typography */
.headline {
    font-family: helvetica;
    font-weight: bold;
    font-size: 4em;
}
/* Rows */
 .row01, .row02, .row03 {
    clear: both;
}
.row01 {
    left:20%;
    top: 0;
    position: relative;
}
.row02 {
    right:10%;
    top: 50%;
    position: relative;
}
.row03 {
    left:10%;
    top: 100%;
    position: relative;
}
/* General Structure */
 body {
    width: 100%;
    height: 100%;
}
.pagewrap {
    height: 100%;
    width: 80%;
    max-width: 48em;
    margin: 0 auto;
    background-color: #fff6d6;
}

<body>
    <div class="pagewrap">
        <div class="headline">
            <div class="row01 flow left sequence01">ROW 01</div>
            <br/>
            <div class="row02 flow right sequence02">ROW 02</div>
            <br/>
            <div class="row03 flow up sequence03">ROW 03</div>
        </div>
    </div>
</body>

Answer 1

The solution given by adeneo in the comments may work perfectly fine, but since your layout is strictly vertical, why not just use a block layout instead of inline-block or floats?

fiddle here.

You mention a "padding" percentage between the rows as well. Note that margin and padding css attributes as percentages will key off of the width not the height. I placed divs to solve that, but there are other solutions.

Edit

If the headline needs to be vertically centered to the page, here's a nifty way to do it using the "ghost element technique":

/* Headline Typography */
 .wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    text-align: center;
}
 
/* The ghost, nudged to maintain perfect centering */
.wrapper:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

.headline {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    font-family: helvetica;
    font-weight: bold;
    font-size: 4em;
}

fiddle

I learned of it here.