I can't seem to get the texts centered - html

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

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>

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

.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; }
}