Vertically and horizontally center image with line of text directly below

Question

I'm building a landing page for a client that has a logo in the center of the page with their catchphrase directly below.

They want the catchphrase to fade in on page load so I have to display it as a paragraph as opposed to including it in the image file.

How can I get the paragraph of text to responsively stay directly below the centered image?

Here is my html code:

<div class="viewport1">
<div class="center-wrapper">
<div class="image-wrapper">
<a href="home.html"><img src="images/landing_logo2.png" /></a>
<div id="test"><p>enter the sunshine state</p></div>
</div>
</div>
</div>

And my CSS:

<style>

div.viewport1 {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 100%;
overflow: hidden;
z-index: -9999;
}

div.center-wrapper {
max-width: 100%;
height: 100%;
float: left;
position:relative;
left: 50%;
}

div.image-wrapper {
left: -50%;
position: relative;
max-width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}

img {
top: 50%;
left: 50%;
position: relative;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 100%;
max-width: 100%;
vertical-align: middle;
display: inline-block;
}

*, *:before, *:after {
box-sizing: border-box; 
}

.image-wrapper p {
width: 100%;
padding-top: 200px;
margin-left: 10px;
font-family: segoe;
font-size: 21px;
text-align: center;
color: #fff;
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 5s; /* Firefox < 16 */
    -ms-animation: fadein 5s; /* Internet Explorer */
     -o-animation: fadein 5s; /* Opera < 12.1 */
        animation: fadein 5s;
  }

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

</style>

Answer 1

I understand that the logo is to be exactly centered and the text is to be below below that.

You seem to have a lot of unnecessary wrappers so I've simplfied this.

Position the image-wrapper absolutely at the center using the usual techniques *but then position the #test div absolutely as well but at the bottom of the parent div.

div.image-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid grey;
}
.image-wrapper img {
  display: block;
}
#test {
  position: absolute;
  top: 100%;
  width: 100%;
  border: 1px solid grey;
  border-top: none;
}
#test p {
  width: 100%;
  font-family: segoe;
  font-size: 21px;
  text-align: center;
  color: #000;
}

<div class="image-wrapper">
  <a href="home.html">
    <img src="http://lorempixel.com/output/people-q-c-250-250-3.jpg" />
  </a>

  <div id="test">
    <p>enter the sunshine state</p>
  </div>
</div>

JSFiddle Demo