I can't seem to get the texts centered

Question

So I'm using three different texts and the first class .item-1 seems to be positioned properly but the second one goes slightly lower and the third one is way off at the bottom. I used the "margin-top" to get it centered but I feel like this isn't the best practice.

What are some ways to get them centered no matter what?

.divider3 {
        background-image: url("images/people.png");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #b6b6b6;
        height: 300px;
        margin: 0 auto;
    }

    .divider3 p {
        color: #FFFFFF;
        font-size: 20px;
        text-align: center;
        line-height: 25px;
        letter-spacing: 1px;
        padding-top: 8%;
    }

    .item-1, .item-2, .item-3 {
        position: relative;
        display: inline-block;
        width: 50%;
        font-size: 6em;
        animation-duration: 20s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
}

    .item-1 {
	    animation-name: anim-1;
        margin-top: -1%;
    }

    .item-2 {
	    animation-name: anim-2;
        margin-top: -12%;
    }

    .item-3 {
	    animation-name: anim-3;
        margin-top: -13%;
    }

    @keyframes anim-1 {
        0%, 8.3% { left: -100%; opacity: 0; }
        8.3%,25% { left: 25%; opacity: 1; }
        33.33%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-2 {
        0%, 33.33% { left: -100%; opacity: 0; }
        41.63%, 58.29% { left: 25%; opacity: 1; }
        66.66%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-3 {
        0%, 66.66% { left: -100%; opacity: 0; }
        74.96%, 91.62% { left: 25%; opacity: 1; }
        100% { left: 110%; opacity: 0; }
    }

<div class="divider3">
        <p class="item-1">"Super fast service and clean environment!" <br /> - John Anderson, GA</p>
        <p class="item-2">"Plans have changed and I had to have a conference room within an hour and ThanksOffice was perfect for it!" <br /> - Ashley Green, CA</p>
        <p class="item-3">"Very professional and satisfies every need." <br /> - Sam Smith, NJ</p>
    </div>

Answer 1

 .divider3 {
        background-image: url("images/people.png");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #b6b6b6;
        height: 300px;
        margin: 0 auto;
    }

.divider3 p {
    color: #FFFFFF;
    font-size: 20px;
    text-align: center;
    line-height: 25px;
    letter-spacing: 1px;
    padding-top: 8%;
    position: absolute;
    top: 5em;
}

.item-1, .item-2, .item-3 {
    position: relative;
    display: inline-block;
    width: 50%;
    font-size: 6em;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;

}

.item-1 {
    animation-name: anim-1;
}

.item-2 {
    animation-name: anim-2;
}

.item-3 {
    animation-name: anim-3;
}

@keyframes anim-1 {
    0%, 8.3% { left: -100%; opacity: 0; }
    8.3%,25% { left: 25%; opacity: 1; }
    33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
    0%, 33.33% { left: -100%; opacity: 0; }
    41.63%, 58.29% { left: 25%; opacity: 1; }
    66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
    0%, 66.66% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 25%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

Answer 2

These all are paragraphs, so they're appearing just below the preceding one.

You can change their position to be absolute.

I don't know why margin-top isn't working, so I removed them.

The code in action is this:

.divider3 {
        background-image: url("images/people.png");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #b6b6b6;
        height: 300px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .divider3 p {
        color: #FFFFFF;
        font-size: 20px;
        text-align: center;
        line-height: 25px;
        letter-spacing: 1px;
        padding-top: 8%;
    }

    .item-1, .item-2, .item-3 {
        position: absolute;
        display: inline-block;
        width: 50%;
        font-size: 6em;
        animation-duration: 20s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
}

    .item-1 {
	    animation-name: anim-1;
    }

    .item-2 {
	    animation-name: anim-2;
    }

    .item-3 {
	    animation-name: anim-3;
    }

    @keyframes anim-1 {
        0%, 8.3% { left: -100%; opacity: 0; }
        8.3%,25% { left: 25%; opacity: 1; }
        33.33%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-2 {
        0%, 33.33% { left: -100%; opacity: 0; }
        41.63%, 58.29% { left: 25%; opacity: 1; }
        66.66%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-3 {
        0%, 66.66% { left: -100%; opacity: 0; }
        74.96%, 91.62% { left: 25%; opacity: 1; }
        100% { left: 110%; opacity: 0; }
    }

<div class="divider3">
        <p class="item-1">"Super fast service and clean environment!" <br /> - John Anderson, GA</p>
        <p class="item-2">"Plans have changed and I had to have a conference room within an hour and ThanksOffice was perfect for it!" <br /> - Ashley Green, CA</p>
        <p class="item-3">"Very professional and satisfies every need." <br /> - Sam Smith, NJ</p>
    </div>

Answer 3

You can use position:absolute on the p elements and use a vertical centering solution which involves using top:50% and transform:translateY(-50%). This means you don't have to add a unique margin-top to every p element.

I also added position:relative to the .divider3 element so the p tags are positioned relative to that container.

NOTE: I noticed in another answer you said you don't want to use position:absolute. You will have to use position:absolute to take the element out of the natural document flow. Otherwise using position:relative the p tags will stack on top of each other and you will be constantly battling with CSS to adjust their vertical positioning. The more p tags you add it will get progressively harder to compensate for their vertical positioning, because they will get pushed further and further down the page.

.divider3 {
        background-image: url("images/people.png");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #b6b6b6;
        height: 300px;
        margin: 0 auto;
        position:relative;
        overflow:hidden;
    }

    .divider3 p {
        color: #FFFFFF;
        font-size: 20px;
        text-align: center;
        line-height: 25px;
        letter-spacing: 1px;
        top:50%;
        transform:translateY(-50%);
        margin:0;
    }

    .item-1, .item-2, .item-3 {
        position: absolute;
        display: inline-block;
        width: 50%;
        font-size: 6em;     
        animation-duration: 20s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
}

    .item-1 {
	    animation-name: anim-1;
    }

    .item-2 {
	    animation-name: anim-2;
    }

    .item-3 {
	    animation-name: anim-3;
    }

    @keyframes anim-1 {
        0%, 8.3% { left: -100%; opacity: 0; }
        8.3%,25% { left: 25%; opacity: 1; }
        33.33%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-2 {
        0%, 33.33% { left: -100%; opacity: 0; }
        41.63%, 58.29% { left: 25%; opacity: 1; }
        66.66%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-3 {
        0%, 66.66% { left: -100%; opacity: 0; }
        74.96%, 91.62% { left: 25%; opacity: 1; }
        100% { left: 110%; opacity: 0; }
    }

<div class="divider3">
        <p class="item-1">"Super fast service and clean environment!" <br /> - John Anderson, GA</p>
        <p class="item-2">"Plans have changed and I had to have a conference room within an hour and ThanksOffice was perfect for it!" <br /> - Ashley Green, CA</p>
        <p class="item-3">"Very professional and satisfies every need." <br /> - Sam Smith, NJ</p>
    </div>